Experimenting with background image, colors, and opacity.

this is a heading inside a div which has a 50% opacity filter applied

Note how the opacity filter applies to everything within the div including the background color of the div, which is defined as black, and therefore creates the interesting effect of darkening up the existing background image.


<style type="text/css">
body {background-image:url(images/images.jpg);}
#wrapper { border:5px solid red;
color:white;
}
#content {
border: 3px solid orange;
background:black;
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}
h1 {
color:orange;
font-size:40px;
}
h2 {
color:black;
background:yellow;
}
</style>