CSS 背景图像不透明度？

Question

相关 如何使用 CSS 为文本或图像提供透明背景？ ，但略有不同。

我想知道是否可以更改背景 图像 的 alpha 值，而不仅仅是颜色。显然我可以只保存具有不同 alpha 值的图像，但我希望能够动态调整 alpha。

到目前为止，我得到的最好的是：

 <div style="position: relative;">
    <div style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;
                      background-image: url(...); opacity: 0.5;"></div>
    <div style="position: relative; z-index: 1;">
        <!-- Rest of content here -->
    </div>
</div>

它可以工作，但又笨重又丑陋，并且在更复杂的布局中会把事情搞得一团糟。

原文由 Niet the Dark Absol 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果背景不必重复，您可以使用 sprite 技术（滑动门），将所有具有不同不透明度的图像放在一个（彼此相邻）中，然后只需将它们移动 background-position 。

或者，如果您的目标浏览器支持 多种背景（Firefox 3.6+、Safari 1.0+、Chrome 1.3+、Opera 10.5+、Internet Explorer 9+），您可以多次声明相同的部分透明背景图像。这些多个图像的不透明度应该加起来，您定义的背景越多。

这种组合透明胶片的过程称为 Alpha Blending 并计算为（感谢@IainFraser）：

αᵣ = α₁ + α₂(1-α₁) 其中 α 介于 0 和 1 之间。

原文由 DanMan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 CSS 生成的内容来处理褪色背景

演示在 http://jsfiddle.net/gaby/WktFm/508/

HTML

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

CSS

 .container{
    position: relative;
    z-index:1;
    overflow:hidden; /*if you want to crop the image*/
}
.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 transitions 为不透明度设置动画（ _再次通过类_）

演示在 http://jsfiddle.net/gaby/WktFm/507/

添加

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

到 .container:before 规则将使不透明度在一秒内变为 1。

兼容性

• FF 5（ 也可能是 4，但没有安装它。 ）
• IE 9 失败..
• 基于 Webkit 的浏览器失败（ _Chrome 现在支持它 v26 - 也许早期版本也一样，但只是检查了我当前的版本_），但他们知道并正在努力（ https://bugs.webkit.org/show_bug.cgi?id= 23209 )

.. 所以目前只有最新的 FF 支持它.. 但这是个好主意，不是吗？ :)

原文由 Gabriele Petrioli 发布，翻译遵循 CC BY-SA 3.0 许可协议