HTML and CSS Reference
In-Depth Information
Project files update (ch05-02): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
opacity
Initial value:
1
| Inherited: No | Applies to: All | CSS3
Browser support: IE 9+, Firefox 1+, Chrome 1+, Opera 9+, Safari 1.2+
opacity
, introduced in CSS Level 3, gives elements a level of transparency.
opacity: 0.5;
The value for
opacity
is a number, ranging between 0 and 1, to one decimal place. In the preceding example, the
opacity of an element is 50%.
Unlike when you use a background color with an alpha value (which is a color with a transparency), opacity applies
to the element and
all
its children. So say you use the following:
body {
opacity: 0.7;
}
Here, the entire web page has a 70% transparency, which isn't very sensible!
The
opacity
property works in all modern browsers except for Internet Explorer versions 6, 7, and 8. However, as
with gradients, these older versions of Internet Explorer support a
filter
property that achieves the same effect.
In Chapter 15, you learn how to use a tool to automatically write vendor prefixes you haven't included during the
creation of the Cool Shoes & Socks website. It also adds the alternative
filter
properties to make any instance of
opacity
work in older versions of Internet Explorer.
visibility
Initial value:
visible
| Inherited: Yes | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 4+, Safari 1+
Using
opacity: 0
to hide an element works visually, but it's not necessarily the best way to hide an element. The
visibility
property can be given three values:
visible
,
hidden
and
collapse
. All elements, by default,
are
visible
.
visibility: hidden
hides an element, but how does that differ from
opacity: 0
, which
also hides elements?
Assume for a moment that you want to hide the “About” link on the Cool Shoes & Socks web page. When hiding the
link, you use
opacity
, like so:
