Background image transparency with CSS3?

Question

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

Answer 1

You can also accomplish a transarent background image using the css3 pseudo classes and opacity. For example....

HTML:

        ...content that should have 100% opacity...

CSS:

.transparent-background { ... }
.transparent-background:after {
    background: url("../images/yourimage.jpg") repeat scroll 0 0 transparent;
    opacity: 0.5;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

See the sample - http://jsfiddle.net/sjLww/