CSS を使用して透明な背景画像を作成するにはどうすればよいですか?

背景に透明な画像をオーバーレイする

Web デザインでは、背景として画像を追加すると、見た目の美しさが高まります。ただし、画像が明るすぎる場合や、透明度の調整が必要な場合があります。単一の CSS プロパティで背景画像と不透明度を組み合わせることができますか?

画像の透明度と背景画像の設定を個別に説明しているリファレンスがありますが、それらを組み合わせて透明な背景画像を作成することは可能です。

次の例を考えてみましょう。

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

このコードは、指定された URL にある画像を、ID が「main」の要素の背景として設定します。ただし、これでは不透明度の調整はできません。

透明な背景画像を実現するには、次の 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;
}

このコード内:

1. position:relative が親要素 (#main) に追加され、以下の絶対位置を指定できるようになります。 pseudo-element.
2. 背景画像をオーバーレイするために疑似要素 (#main:after) が作成されます。
3. テキストやコンテンツが表示されないように、content プロパティは空の文字列に設定されます。
4. 擬似要素には、position:Absolute による絶対位置が与えられ、親をオーバーレイできるようになります。
5. background-image プロパティは、#main 要素のbackground-image と同じ URL に設定され、親要素に画像がオーバーレイされます。
6. opacity : 0.2 は透明度レベルを設定します。 20%まで。この値を調整すると、画像の不透明度が変わります。
7. z-index: -1 を指定すると、疑似要素が親要素のコンテンツの後ろに配置されます。

このメソッドを使用すると、背景画像を編集し、その不透明度を制御することで、コンテンツを圧倒しない透明な画像を使用して視覚的に魅力的なデザインを作成できます。

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