开发者

Is there a way with CSS3 to specify background image translucency?

开发者 https://www.devze.com 2023-03-18 21:19 出处:网络
I found background-color:rgba(), but this only specifies a background color\'s alpha.Is there something similar for the background image, when the image is specified using the CSS3 background-i开发者_

I found background-color:rgba(), but this only specifies a background color's alpha. Is there something similar for the background image, when the image is specified using the CSS3 background-i开发者_C百科mage()? If there is no pure CSS3 solution, what's the most elegant way to do this?


Simply have a container the same size on top with a background-color fill of your percentage rgba white.

ie.

html {
    background-image: url(blah.jpg);
}

body {
    background-color: rgba(255,255,255,0.5);
}

Note that this technique won't work if you require the background image to be translucent on elements overlapping other elements.


You could add a div whose sole purpose is to be the background, and give it an

opacity: 0.5;

Then have a sibling div that contains your content positioned on top of it.


div.gallery   {
   background-image: url(...........);
   filter :alpha(opacity=0.8);
   opacity : .8;
}

Any children of this element inherit its opacity, if that is a problem do what JD Parsons said. The filter property is for IE. [example modified from CSS3 Visual Quickstart Guide]

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号