CSS を使用して背景画像の不透明度を調整するにはどうすればよいですか?

CSS で生成されたコンテンツを使用した背景画像の不透明度の調整

CSS のbackground-image-opacity プロパティを使用すると、その名前が示すように、変更できます。背景画像の透明度。ただし、そのようなプロパティは CSS 内に存在しないことに注意することが重要です。

CSS で生成されたコンテンツとクラスの使用

別のアプローチでは、CSS で生成されたコンテンツを使用して、色あせた背景を作成します:

<div class="container">
  contents
</div>

.container {
  position: relative;
  z-index: 1;
  overflow: hidden; /* Consider cropping the image */
}

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

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

このテクニックを使用すると、次のように表示できます。色あせた背景画像では、不透明度を動的に調整することはできません。

CSS トランジションの使用

背景画像の不透明度をアニメーション化するには、以下を使用できます。 CSS トランジション:

.container:before {
  -webkit-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

この .container:before ルールへの追加により、次のようになります。不透明度は 1 秒間で 1 に移行します。

ブラウザの互換性

• Firefox 5 以降 (FireFox 4 の可能性もあります)
• IE 9 (失敗) )
• Webkit ベースのブラウザ (Chrome 26 以降)

このアプローチは現在、Firefox の最新バージョンでのみサポートされていることに注意してください。

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