CSS は背景画像と不透明度を 1 つのプロパティに組み合わせることができますか?

背景画像と不透明度を 1 つのプロパティで設定できますか?

CSS では背景の透明度と背景画像を個別に設定できますが、その方法は次のとおりです。透明な背景画像を作成しますか?

例シナリオ:

完全な不透明度で使用すると、背景として視覚的に圧倒される画像を考えてみましょう。より微妙な効果を得るには、不透明度を約 0.2 に下げます。

従来のアプローチ:

background-image プロパティだけを使用しても、画像の透明度は調整されません。 .

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}

解決策: 擬似要素ハック

透明な背景画像を作成するには、疑似要素を利用します:

#main {
    position: relative;
}
#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

説明:

• :after 疑似要素は #main 内に新しい要素を作成しますdiv.
• これにはコンテンツがない (コンテンツ: "") ため、視覚的にはわかりません。
• #main の左上に絶対に配置され、その領域全体をカバーします。
• 不透明度を 0.2 に下げると、背景画像が透明になります。
• Z インデックスを -1 にすると、画像がコンテンツの後ろに配置されます。 #main 内。

以上がCSS は背景画像と不透明度を 1 つのプロパティに組み合わせることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。