如何使用 CSS 控制背景图像的不透明度？

通过 CSS 操纵背景图像不透明度

与更改背景颜色的不透明度相比，会出现有关调整背景图像不透明度的疑问。虽然可以选择保存具有不同透明度级别的图像，但动态 Alpha 值控制是可取的。

为此，一个简单的方法涉及嵌套两个 DIV 元素：

<div>
<p>虽然功能强大，但此方法很麻烦并且会破坏更复杂的布局。</p>
<p><strong>CSS 生成内容</strong></p>
<p>另一种解决方案在于CSS生成的内容，允许您直接在容器元素上设置背景图像：</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 过渡

CSS 过渡可用于动态设置背景图像不透明度的动画：

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