与如何使用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>
它可以工作,但是又笨重又丑陋,并且在更复杂的布局中使事情变得混乱。
如果背景不必重复,则可以使用Sprite技术(滑动门),将所有具有不同不透明度的图像放到一个(彼此相邻)中,然后使用来移动它们background-position。
background-position
或者,如果目标浏览器支持多个背景(Firefox3.6 +,Safari 1.0 +,Chrome 1.3 +,Opera 10.5 +,Internet Explorer 9+),则可以多次声明相同的部分透明背景图像。这些多张图像的不透明度应加起来,您定义的背景越多。