How do I give text or an image a transparent background using CSS?
Is it possible, using CSS only, to make the
background of an element semi-transparent but have the content (text & images) of the element opaque?
I'd like to accomplish this without having the text and the background as two separate elements.
When trying:
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}<p>
<span>Hello world</span>
</p>
It looks like child elements are subjected to the opacity of their parents, so
opacity:1 is relative to the opacity:0.6 of the parent.Answer:
Either use a semi-transparent PNG image or use CSS3:
background-color:rgba(255,0,0,0.5);
Here's an article from css3.info, Opacity, RGBA and compromise (2007-06-03).
