CSS3 background opacity with background image
I am attempting to have an opacity effect on my div which has a background-image applied, and still keep the text "un-opacified". My markup:
<div id="projects" class="feature">
Projects
</div>
My CSS:
.feature {
display: inline-block;
margin: 30px;
cursor: pointer;
width: 300px;
height: 300px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
font-family: 'Droid Sans', Helvetica Neue, sans-serif;
font-size: 2em;
color: #fff;
text-align: center;
l开发者_如何学Cine-height: 1.2em;
}
.feature:after {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.8);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
.feature#projects {
background-image: url('img/hero.png');
}
I thought of using pseudo elements, but to no avail!
Any ideas?
I might use a semi-transparent png
for the background image, then style the text accordingly.
You might also want to look into RGBa:
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
This applies to background-color, although it may also work on your image (untested, though)
There is sort of a hack for it where you layout the div with the background underneath another div containing the text.
Check out the following link:
http://www.sumobaby.net/news/2011/03/04/change-background-opacity-without-affecting-text/
Also here's a quick working example:
http://jsfiddle.net/7pVGM/
Note: the markup and css isn't that great I just wrote it in like 5 min :)
精彩评论