【CSS】文字や画像は透過させず、背景のみ透明度を操作する方法
2017/12/26
背景色を黒とした適当なボックスを作成し、画像、テキストを配置。
そのボックスの透明度を操作する時に opacity を使うと、文字や画像までもが透過してしまいます。
こういう場合の適切な方法。
透明度を操作する方法
opacityではなく、background-color:rgba();を使う
先ほどの内容をCSSで書くとこんな感じ。
[css]
.box1 {
background-color: #000;
color: #fff;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
[/css]
上記内容では、配置した画像やテキストまでもが一緒に透過してしまいます。
背景のみを透過させたいって場合は、下記の書き方にすると幸せになれます。
[css]
.box1 {
background-color: #000;
color: #fff;
background-color: rgba(0,0,0,0.7);
}
[/css]
ベンダープレフィックスもなく、スッキリしましたね。
よく考えたら、 opacity の出番が無くなる感じがします（苦笑）
[tgAmazonItemLookup asin="B01LQQH8E2" related="1"]