CSS背景图像不透明？ [英] CSS background-image-opacity?

问题描述

相关于 CSS：半透明背景，而不是文字，但略有不同。

我想知道是否可以更改背景图片的alpha值，颜色。显然，我可以保存图像与不同的alpha值，但我想能够动态调整alpha。

I'd like to know if it's possible to change the alpha value of a background image, rather than just the colour. Obviously I can just save the image with different alpha values, but I'd like to be able to adjust the alpha dynamically.

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

So far the best I've got is:

<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>

它可以工作，但它体积庞大和丑陋，并且在更复杂的布局中混乱。 >

It works, but it's bulky and ugly, and messes things up in more complicated layouts.

推荐答案

如果背景不需要重复，你可以使用sprite技术不同的不透明度变成一个（彼此相邻），然后用 background-position 来移动它们。

If the background doesn't have to repeat, you can use the sprite technique (sliding-doors) where you put all the images with differing opacity into one (next to each other) and then just shift them around with background-position.

您可以多次声明相同的部分透明的背景图片，前提是您的目标浏览器支持多个背景< a>（Firefox 3.6+，Safari 1.0+，Chrome 1.3+，Opera 10.5+，Internet Explorer 9+）。这些多个图片的不透明度应该相加，您定义的背景越多。

Or you could declare the same partially transparent background image more than once, if your target browser supports multiple backgrounds (Firefox 3.6+, Safari 1.0+, Chrome 1.3+, Opera 10.5+, Internet Explorer 9+). The opacity of those multiple images should add up, the more backgrounds you define.

这篇关于CSS背景图像不透明？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！