超簡単！cssを使って背景画像のみ透過にする方法

2016年11月5日

コーディング作業をしていて、背景色をopacityで透過にすることはよくありますが、それとは少し違って背景画像のみを透過にすることもたまにあります。
背景色と背景画像の違いなので、やることは同じだろうと思うかもしれませんが、背景画像の場合、opacityで透過すると中にある子要素まで透過されてしまうので意外にめんどくさいのです。

最初の頃は背景画像のみを透過にする方法が分からず、透過された画像として書き出して対応していました。
お恥ずかしい限り、、、

対処法として、親要素と子要素の間にひとつ階層を作ってあげて、あとはcssを少し書いてあげれば簡単に対応することができます！

ではその、cssを使って背景画像のみを簡単に透過にするサンプルコードを記載しておきますので、参考にでもなればと思います。

html

<div class="sampleWrap">
<div class="bkRGBA">
<p class="sample">文字は透過しないぞー！！</p>
</div>
</div>

<p class="sample">文字は透過しないぞー！！</p>

</div>

スポンサードサーチ

css

.sampleWrap{
position: relative;
width: 1000px;
height: 600px;
margin: 0 auto;
background: url(./bkOpacity.jpg) no-repeat;
}
.bkRGBA{
/* 背景画像の透過用css */
height: 100%;
background: rgba(255,255,255,0.5);
}
.sample{
position: absolute;
top:0;
right: 0;
bottom: 0;
left: 0;
width: 600px;
height: 50px;
margin: auto;
font-size: 50px;
}

.sampleWrap{

position: relative;

width: 1000px;

height: 600px;

margin: 0 auto;

background: url(./bkOpacity.jpg) no-repeat;

}

.bkRGBA{

/* 背景画像の透過用css */

height: 100%;

background: rgba(255,255,255,0.5);

}

.sample{

position: absolute;

top:0;

right: 0;

bottom: 0;

left: 0;

width: 600px;

height: 50px;

margin: auto;

font-size: 50px;

}

上記のサンプルコードに書いてあるように、親要素（今回.sampleWrap）と透過したくない子要素（.sample）の間に新たにdiv（.bkRGBA）などで階層を作ってあげ、そのdivに対して高さ（height)とbackground:rbga(255,255,255,0.5);を書いてあげれば良いということです！

こうすることによって、背景画像と透過したくない子要素の間に一枚透過の膜ができるような感じになります。

上記のコードで、実際にはこんな感じに表示されます。