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