The issue of CSS transparency is overlooked, mainly because it is not part of the current W3C specification - CSS level 2.1, and will render your CSS invalid. But it is achievable, nonetheless. Here I’ll show you how to make a background transparent in CSS. It just requires a few lines of CSS code.
filter:alpha(opacity=x)[1-100];
opacity:.x [0-1];
-moz-opacity:.x [0-1];
x denotes the value of the opacity. Note that opacity and –moz-opacity are decimals, unless you use maximum transparency, in which case the value would be 1; filter is a whole number. So, for instance, to set an opacity of 75%, filter would be set to 75 and opacity and –moz-opacity would be set to 0.75 or .75. The higher the opacity, the less transparent your object will be and the lower the opacity, the more transparent.
opacity is the standard way to create transparency in CSS, but is only currently supported by CSS3 compatible browsers, such as Firefox 0.9 (Mozilla 1.7), Opera and Safari, so we need to add a bit more to our code to achieve across-the-board transparency...
filter:alpha(opacity) is used for IE 4+-moz-opacity is used for version of Firefox below 0.9 (Mozilla 1.7)Suppose we want to give our box a transparency of 50%...
#box {
border:2px solid black;
background:orange;
height:100%;
overflow:auto;
width:160px;
padding:6px;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
<div id="box">
<p>My pretty little box.</p>
<p>I am normally bright orange, but as you can see, transparency has changed me to peach!</p>
</div>
My pretty little box.
I am normally bright orange, but as you can see, transparency has changed me to peach!
My pretty little box.
I am bright, vibrant orange without my transparency!
Got any questions or comments? Feel free to mail me @ helen@alternategateways.com.
Back to resources.