HTML and CSS Reference
In-Depth Information
You specify a color using HSL format with the
hsl()
function, which takes three comma-separated values, as
follows:
•
Hue expressed as a number between 0 and 360: This is the angle of the color on the
color circle. Browsers are expected to adjust out-of-range numbers, so −120 should be
interpreted as 240 (blue).
•
Saturation expressed as a percentage: 0% is a shade of gray, and 100% is full saturation.
•
Lightness expressed as a percentage: 0% is black, 50% is normal, and 100% is white.
The following example represents red:
hsl(0, 100%, 50%)
Creating Transparent Colors with the RGBA and HSLA Formats
The CSS3 Color module extends the RGB and HSL formats to allow you to set the opacity of the color using alpha
transparency. To specify a color with alpha transparency, use the
rgba()
or
hsla()
function.
Both functions take four comma-separated values. The first three values are the same as for
rgb()
and
hsl()
.
The fourth value sets the level of transparency, and must be a number between 0 (completely transparent) and 1
(completely opaque). The following examples create semitransparent red:
rgba(255, 0, 0, 0.5)
rgba(100%, 0%, 0%, 0.5)
hsla(0, 100%, 50%, 0.5)
Setting the alpha transparency of a color not only reduces the color intensity, but it also allows any
background to show through. The background becomes more visible the closer the fourth value is to 0.
Not
■
All browsers except iE 6-8 support
rgba()
,
hsl()
, and
hsla()
.
Specifying Background Images and Other Files
A small number of properties, such as
background-image
and
list-style-image
, require the URL of the file you
want to use. To specify the location of a file, enter the path between the parentheses of
url()
. You can use either
an absolute path or a relative one. The file path can be optionally enclosed in single or double quotes. Whitespace
between the parentheses and the file path is also permitted.
The following examples are all valid:
url(../../images/grand canyon.jpg)
url(/images/grand_canyon.jpg)
url("http://www.example.com/images/grand_canyon.jpg")
url( "/images/grand_canyon.jpg" )
url('../../images/grand_canyon.jpg')
url( '../../images/grand_canyon.jpg' )
If using a relative file path, the location should be relative to the style sheet.
Not
■
The CSS3 image Values and Replaced Content module proposes an
image()
function to specify clipped
portions of an image and fallback images, but no browser yet implements it.
