HTML and CSS Reference
In-Depth Information
rgba(255,255,255,0.5)
rgba(100%,100%,100%,0.5)
To make a color completely transparent, you simply set the alpha value to
0
; to be
completely opaque, the correct value is
1
. Thus,
rgb(0,0,0)
and
rgba(0,0,0,1)
will yield
precisely the same result (black).
Figure 10
shows a series of paragraphs set in increas-
ingly transparent black, which is the result of the following rules.
p.one {color: rgba(0,0,0,1);}
p.two {color: rgba(0%,0%,0%,0.8);}
p.three {color: rgba(0,0,0,0.6);}
p.four {color: rgba(0%,0%,0%,0.4);}
p.five {color: rgba(0,0,0,0.2);}
Figure 10. Text set in progressive translucency
As you've no doubt already inferred, alpha values are always real numbers in the range
0
to
1
. Any value outside that range will either be ignored or reset to the nearest valid
alpha value. You cannot use
<percentage>
to represent alpha values, despite the math-
ematical equivalence.
Hexadecimal RGB colors
CSS allows you to define a color using the same hexadecimal color notation so familiar
to old-school HTML web authors:
h1 {color: #FF0000;} /* set H1s to red */
h2 {color: #903BC0;} /* set H2s to a dusky purple */
h3 {color: #000000;} /* set H3s to black */
h4 {color: #808080;} /* set H4s to medium gray */
Computers have been using “hex notation” for quite some time now, and programmers
are typically either trained in its use or pick it up through experience. Their familiarity
with hexadecimal notation likely led to its use in setting colors in HTML. The practice
was simply carried over to CSS.
Here's how it works: by stringing together three hexadecimal numbers in the range
00
through
FF
, you can set a color. The generic syntax for this notation is
#RRGGBB
. Note
that there are no spaces, commas, or other separators between the three numbers.
