PR

背景画像(background-color)削除。background-colorで色の指定してる場合で、レスポンシブである範囲背景色を消す方法。【サンプルコードあり】

HTML CSS

HTML・CSSでbackground-colorを削除する場合、
コーディングしててレスポンシブである範囲
だけ背景の色background-colorで指定しててその色を
を消したい場合の方法が、あれッ?てなったんでその方法書きます。

background-colorの色を消すコード

結論は簡単です。
下記コードをCSSで指定したらできました。

CSSに下記のコード指定

background-color: transparent;

これでOKです。

最初は、none指定したらええやん!
って思って指定したが駄目でした。

↓   ↓   ↓

サンプルコードはこちらです。

HTML

<section class="bcg">
    <div class="bc-b">
      <p>この部分の背景は残す</p>
      <p>この部分の背景は残す</p>
      <p>この部分の背景は残す</p>
      <p>この部分の背景は残す</p>
      <p>この部分の背景は残す</p>
    </div>
    <div class="bc-b bg-none">
      <p>この部分の背景が幅1500pxでなくなる指定</p>
      <p>この部分の背景が幅1500pxでなくなる指定</p>
      <p>この部分の背景が幅1500pxでなくなる指定</p>
      <p>この部分の背景が幅1500pxでなくなる指定</p>
    </div>
</section>

CSS

.bcg{
padding: 100px 0;
}

p{
text-align: center;
margin: 0;
padding: 10px;
}

.bc-b{
background-color: rgb(170, 170, 235);
}

@media screen and (max-width: 1500px) {
.bg-none{
background-color: transparent;
}
}

是非参考にしてください。

スポンサーリンク

ハードな通信をする方におすすめ!専用帯域で高速インターネット!
hi-hoひかりから、ゲームに特化した回線「hi-hoひかりwith games」が新登場。
ラグ・遅延を抑えて勝利を掴め!

hi-ho with games

オンラインゲーム・配信者向けインターネット
月額4,400円~
日本最大級 プロ愛用のゲーム専用インターネット光回線

HTML CSS
inoproをフォローする

コメント

タイトルとURLをコピーしました