Background image transparency with CSS3?

Question

Is there a way to add transparency to a background-image using CSS3?

Answer 1

image opacity is not a CSS3 property it is a CSS2 property.There are no cross-browser compatibility issues using this property.It works fine even in older versions of IE.

The following is the syntax

img {
    opacity: 0.7;
    filter: alpha(opacity = 70); /* For IE */
}

the value for opacity must be between 0 and 1. 0 being invisible and 1 being opaque.

for transparency to DOM elements background-color property rgba can be used as

div {
   background: rgba(200, 54, 54, 0.5); 
}

as there are compatibility issues with older versions of IE a fallback is advised.

div {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, 0.5); 
}

IE conditional sheets can be used as well for better performance.

     
 

        
热议问题