如何使用 CSS 產生的內容來控制背景圖片的不透明度？

產生內容使CSS 背景影像不透明度成為可能

與背景顏色的不透明度調整相比，調整背景影像的Alpha 值以前被認為具有挑戰性。然而，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

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

CSS

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

雖然產生的不透明度內容不能直接修改，仍可透過CSS事件和類別動態控制。例如，以下程式碼將在懸停時將不透明度調整為 1：此外，可以採用 CSS 過渡來平滑地實現不透明度變化的動畫效果。透過將以下屬性新增至 .container:before 規則中，不透明度將在 1 秒內轉換為 1：請務必注意此技術在不同瀏覽器中的不同相容性。 Firefox 5 及更高版本支援它，但 Internet Explorer 9 及更低版本不支援。基於 Webkit 的瀏覽器（例如​​ Chrome）可能會根據版本的不同提供不一致的支援。