开发者

How to make a div's background color translucent?

I only want the background color of white in my div to be translucent roughly 50%. The content should be fully opaque. What's the proper way to do this? I imagined when I looked up the background CSS property, I'd find an opacity settin开发者_C百科g, but didn't. Don't care about IE6.

UPDATE: solving with the rgba solution given below in conjunction with CSS3PIE's solution for getting rgba to work in IE browsers.


You can use the background-color: rgba() notation:

#theIdofYourElement,
.classOfElements {
    background-color: #fff;
    background-color: rgba(255,255,255,0.5);
}


Edited to add the default background-color (for browsers that don't understand the rgba() notation). Albeit I was under the impression that all but IE do understand it (but I could be wrong, and haven't tested to be sure...).

Edit with thanks to @akamike.


Edited to address question from OP (in comments):

which browsers don't understand rgba? will they all in the future, is this part of css3?

The best information I could find is the CSS Tricks' rgba() browser support table, with a link to a demo and 'more complete' compatibility table.


If you want cross-browser opacity, you can handle each within your css definition

div
{
    opacity: .50; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
    filter: alpha(opacity=50); /* IE lt 8 */
    -ms-filter: "alpha(opacity=50)"; /* IE 8 */
    -khtml-opacity: .50; /* Safari 1.x */
    -moz-opacity: .50; /* FF lt 1.5, Netscape */
}


There is a CSS property called backdrop-filter providing real translucency (as opposed to transparency, which is already available in CSS).

Currently supported by all modern browsers.

.my-selector {
   backdrop-filter: blur(5px);
}
  • More about the selector
  • Browser support


Easiest way is to create a semi-transparent PNG and just use that as your background image for the div.

If you're using Photoshop (or similar tools) just create a 10px by 10px image that is all white -- then drag the opacity slider down to 50%. Save it as a PNG and you should be rockin'!

Using RGBA is also a possibility, but you're not just losing IE6 then -- there are still quite a few people using browsers that don't support the alpha scheme.

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜