相关于 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.
您可以多次声明相同的部分透明的背景图片,前提是您的目标浏览器支持多个背景(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背景图像不透明?
发布评论