Controlling Opacity and Visibility


  • How to modify the opacity of an element
  • How to set the visibility of an element

The last CSS I will teach you is how to change the opacity of an element, that is how transparent an element is, and also how to set the visibility of an element, allowing you to hide it from view.


First, you'll look at the opacity property; it has a very simple syntax, as you can see from the following table.

opacity <number>Initial value: 1

An opacity value of 1 indicates that an element is fully opaque. An opacity value of 0 on the other hand makes the element completely invisible. You can specify opacity to two decimal places.

images NOTE All major browsers, except IE 6, 7, and 8, support the opacity property. There are proprietary methods of setting opacity in IE versions less than 9 that I won't cover here, but see Appendix B for links to more information.

You should make sure that transparency is an optional part of the visual design, so that users of modern browsers are rewarded with a prettier visual experience, but the site remains attractive and usable in older browsers.

Let's Try It Out!

TRY IT OUT Using the opacity Property

Example 17-1

To demonstrate the use of the opacity property, follow these steps.

  1. Enter the following markup:
     <!DOCTYPE html PUBLIC “-//W3C//DTD HTML ...

Get Beginning CSS: Cascading Style Sheets for Web Design, Third Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.