CSS background-image-opacity？

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>

它可以工作，但是又笨重又丑陋，并且在更复杂的布局中使事情变得混乱。

Answer 1

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

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