How to set opacity to the background color of a di

问题:

This question already has answers here:

CSS opacity only to background color, not the text on it? [duplicate] (11 answers)

Closed 5 years ago.

I have this class

.box { background-color:#fff; border:3px solid #eee; }

My question is how can I set an opacity to the white background only so that it will kinda mix with my background?

Thank you.

回答1:

CSS 3 introduces rgba colour, and you can combine it with graphics for a backwards compatible solution.

回答2:

I think rgba is the quickest and easiest!

background: rgba(225, 225, 225, .8)

回答3:

I think this covers just about all of the browsers. I have used it successfully in the past.

#div {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}

回答4:

You can use CSS3 RGBA in this way:

rgba(255, 0, 0, 0.7);

0.7 means 70% opacity.

回答5:

I would say that the easiest way is to use transparent background image.

http://jsfiddle.net/m48nH/

background: url("http://musescore.org/sites/musescore.org/files/blue-translucent.png") repeat top left;