CSS で生成されたコンテンツで背景画像の不透明度を制御するにはどうすればよいですか?

生成されたコンテンツで CSS 背景画像の不透明度が可能になりました

背景色の不透明度調整とは対照的に、背景画像のアルファ値の調整はこれまで難しいと考えられてきました。ただし、CSS 生成コンテンツは、背景画像の不透明度を動的に変更するソリューションを提供します。

この手法を実装するには、指定された位置と寸法でコンテナ div を作成し、それに残りのコンテンツ要素を追加します。次に、コンテナ用に作成した擬似要素内に背景画像を定義します。その後、不透明度プロパティを擬似要素内で操作できます。

デモの例は http://jsfiddle.net/gaby/WktFm/508/ にあります。以下は必要なコード スニペットです:

HTML

<div>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false">.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 イベントとクラスを通じて動的に制御できます。たとえば、次のコードはホバー時に不透明度を 1 に調整します:

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

さらに、CSS トランジションを使用して、不透明度の変化をスムーズにアニメーション化できます。次のプロパティを .container:before ルールに追加すると、不透明度は 1 秒かけて 1 に遷移します:

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

ブラウザごとにこの手法の互換性が異なることに注意することが重要です。 Firefox 5 以降ではサポートされていますが、Internet Explorer 9 以前ではサポートされていません。 Chrome などの Webkit ベースのブラウザは、バージョンに応じてサポートが一貫していない可能性があります。