CSS で背景画像の不透明度を制御するにはどうすればよいですか?

CSS による背景画像の不透明度の操作

背景色の不透明度の変更とは対照的に、背景画像の不透明度の調整に関してクエリが発生します。さまざまな透明度レベルで画像を保存することはオプションですが、動的アルファ値制御が望ましいです。

そのためには、2 つの DIV 要素をネストする簡単なアプローチが必要です。

<div>

これは機能しますが、このメソッドは面倒で、より複雑なレイアウトが中断されます。

CSS 生成Content

代替ソリューションは CSS 生成コンテンツにあり、コンテナ要素に背景画像を直接設定できます:

.container{
    position: relative;
    z-index:1;
    overflow:hidden; 
}
.container:before{
    z-index:-1;
    position:absolute;
    left:0;
    top:0;
    content: url('path/to/image.ext');
    opacity:0.4;
}

このメソッドは背景画像の不透明度制御を有効にします。

動的不透明度操作

ただし、生成されたコンテンツの不透明度を動的に変更することはできません。

この制限を回避するには、クラスと CSS イベントの使用を検討してください:

.container:hover:before{
    opacity:1;
}

CSS トランジション

CSS トランジション背景画像の不透明度を動的にアニメーション化するために使用できます:

-webkit-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;

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