Div の背景画像のみの不透明度を調整するにはどうすればよいですか?

Div 背景画像のみの不透明度

Web デザインでは、適切な不透明度レベルを設定すると、ページ上の要素の視覚的な魅力を高めることができます。ただし、同じコンテナ内の他の要素に影響を与えずに背景画像の不透明度を調整するのは難しい場合があります。この効果を実現する方法は次のとおりです。

1 つの方法には、質問で提案されているように、CSS 疑似要素を使用することが含まれます。

.myDiv {
  background-image: url("your_image.png");
  opacity: 0.5;
}

.myDiv::before {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

これにより、隠し要素 (::before) が作成されます。背景画像をオーバーレイし、その不透明度を 0.5 に設定しますが、div 内のテキストは影響を受けません。

ただし、より単純なアプローチを使用して同じ効果を実現することもできます。

.myDiv {
  background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("your_image.png");
}

このメソッドは、2 つのカラー ストップを使用して線形グラデーションを作成します。両方のストップは、不透明度 0.5 の半透明の白色 (#FFFFFF) を指定します。 、続いて背景画像。これにより、背景画像が 50% の不透明度で表示され、div 内のテキストは完全に表示されたままになります。

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