如何使用 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事件和类动态控制。例如，以下代码将在悬停时将不透明度调整为 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 及更低版本不支持。基于 Webkit 的浏览器（例如 Chrome）可能根据版本的不同提供不一致的支持。