Setting opacity in CSS

Last week, I wanted to create a translucent layer to grey out functionality on the site. To do this, create a div that covers the window and set the background color to black.

But how to make it translucent? This webpage on CSS opacity covers how to do this and many other useful things:

.grey_background {
	background: black;
	filter:alpha(opacity=25);
	-moz-opacity:.25;
	opacity:.25;
}

The “filter” rule is for IE (taking advantage of a very old feature that dates back at least 5 years) and the “-moz-opacity” rule is no longer needed for newer versions of Firefox and Mozilla which support the CSS3 spec. Safari also supports the spec.

One thought on “Setting opacity in CSS

  1. Hello,
    I have tried to fix the opacity settings here, but on luck. If I view the page in Camino or Firefox, the text changes opacity as I scroll down. Do you have anyway that I could fix this? Thank you, Rosanne

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.