みなさんこんにちは。
しばらくは深海生活日記を続けていこうと思っていたのですが、
月イチで業務に関する記事も書けと御達しがありました。
なので今回はCSSに関するメモ書きです。
内容はタイトルの通り、CSSで設定した背景画像だけを透過する方法です。
背景色を透過するのはrgba()で簡単にできるのですが、画像となるとそうはいかず、かといって要素自体を「opacity」で透過させると子要素含めて透過されてしまいます。
どうすればいいか色々悩んだ結果、擬似的に透過させたような形にしました。
具体的には背景画像を指定する要素と子要素の間にもう一つ要素を追加し、そこにちょこっとCSSを書き足してみました。
HTML
<div class=”sample-box”>
<h2>見出しですよ～</h2>
<p>テキストですよ～～</p>
</div>
↓
<div class=”sample-box”>
<div class=”bg-opacity”> ←この階層を追加しました。
<h2>見出しですよ～</h2>
<p>テキストですよ～～</p>
</div>
</div>
CSS
.sample-box {
background: url(‘/images/background_image.png’) no-repeat;
}
.bg-opacity {
background: rgba(255,255,255,.5);
height: 100%;
}
としてみました。
どうなっているかというと、背景画像の上に「真っ白で透明度が50％」の背景色を重ねたわけです。
テキスト類は半透明の背景色のさらに上にあるので影響を受けません。
画像の上に半透明の白が乗っかることで視覚的に画像が透過しているように見せることができます。
以上、CSSで背景画像のみを透過させる方法・・・ではなく、透過したっぽく見せる方法でした。
次回は深海生活の続きをしたいです。
ではまた。
