CSS で不透明度コントロールを使用して透明な背景画像を作成するにはどうすればよいですか?

不透明度コントロールを使用した透明な背景画像

CSS では、背景画像の設定とその不透明度の調整は別のタスクです。ただし、これら 2 つを組み合わせて透明な背景画像を作成することは可能です。

背景画像と不透明度の設定

背景画像を設定するには、有効な画像 URL を指定してbackground-image プロパティを使用します。 。例:

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

背景画像の不透明度を指定するには、opacity プロパティを使用します。値の範囲は 0 (完全に透明) から 1 (完全に不透明) です。

ただし、背景画像プロパティに不透明度を直接適用すると、背景自体ではなく画像にのみ影響します。透明な背景画像を実現するには、追加の手順が必要です。

透明な背景レイヤーの作成

背景画像の上に透明なレイヤーを作成するには、次の CSS を使用します:

#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;
}

この CSS では:

• #main:after は、透明なレイヤー。
• 位置: 絶対的にメイン要素の上にレイヤーを配置します。
• 不透明度: 0.2 はレイヤーの不透明度を 20% に設定します。
• z-index: -1レイヤーがメイン要素のコンテンツの背後にあることを保証します。

これらの CSS テクニックを組み合わせることで、正確な不透明度制御を使用して、透明な背景画像を作成できます。

以上がCSS で不透明度コントロールを使用して透明な背景画像を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。