I have set background color and background image for a div. How can I add the opacity to background image so that the background color become visible too?
Here's my code:
CSS:
.box{
background-color: green;
background-image: url('http://farm8.staticflickr.com/7308/12305815623_3d1614042a_n.jpg');
background-repeat: no-repeat;
font-size: 40px;
width: 320px;
height: 200px;
}
HTML:
<div class="box">
<div class="wrap">Some text</div>
</div>
I would suggest a partially transparent PNG is the best solution. It doesn't require any hacks, works on all platforms and degrades nicely even on IE6
There's a several CSS properties for adding opacity:
opacity: 0.2; /* Standard property, for all modern browsers */
filter: alpha(opacity=20); /* For old IE */
Look at the updated fiddle: http://jsfiddle.net/Yv6T3/1/
have been asked already and the answer is pretty nice: How do I give text or an image a transparent background using CSS?
just use
background-color:rgba(255,0,0,0.5);
where 0.5 is your transparency.
Of course, doesn't work everywhere, but for sure does in all modern browsers.
