CSS で背景画像の不透明度を設定するには、 背景画像プロパティ 不透明度プロパティと一緒に。不透明度を調整することで、背景画像の透明度を制御し、その背後にある要素が部分的に透けて見えるようにして、視覚的に階層化された効果を作成します。
CSS で背景画像の不透明度を設定するために次のアプローチを使用しています。
目次
セレン
1. Opacity プロパティの使用
の 不透明度プロパティ CSS では、要素とその内容の透明度レベルを設定します。 0 (完全に透明) と 1 (完全に不透明) の間の値を受け入れると、その子を含む要素全体に影響を与えるため、Web デザインで透明性を制御する簡単かつ効果的な方法になります。
構文:
div { opacity: 0.5; }> 例: .element クラスの CSS スタイルの不透明度プロパティが 0.3 に設定され、背景画像が半透明になります。これにより、テキストの読みやすさを維持しながら、背景の可視性が調整されます。
HTML
> <>html> lang>=>'en'>>>> ><>head>>>> ><>meta> charset>=>'UTF-8'>>>> ><>meta> name>=>'viewport'> content>=>'width=device-width, initial-scale=1.0'>>>> ><>title>>背景画像の不透明度title> |