☰

CSS の不透明度は背景色のみに適用され、その上のテキストには適用されませんか? [重複] 質問する

tag-icon • tag-icon css opacity
CSS の不透明度は背景色のみに適用され、その上のテキストには適用されませんか? [重複] 質問する

プロパティを、その上のテキストではなく、のプロパティopacityにのみ割り当てることはできますか?backgrounddiv

私はもう試した：

background: #CCC;
opacity: 0.6;

ただし、不透明度は変わりません。

ベストアンサー1

透明な背景を使いたいようですね。その場合は、rgba()関数：

rgba(R, G, B, A)

R (赤)、G (緑)、B (青) は<integer>または のいずれか<percentage>で、数値 255 は 100% に相当します。A (アルファ) は<number>0 から 1 の間の または で<percentage>、数値 1 は 100% (完全な不透明度) に相当します。

RGBaの例

background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */

小さな例rgbaどのように使用できるかを示します。

2018年現在、実質的にすべてのブラウザがこのrgba構文をサポートしている。

おすすめ記事