CSS3 Farbe (Color)

CSS3bietet verschiedene neue Methoden zur Definition von Farbvalues.

In CSS3Farben definiert

In dem vorherigen Abschnitt haben Sie gelernt, wie manFarbkeyword und RGB-NotationFarbe definieren. Außer CSS3Neue Symbole rgba(), hsl() und hsla() wurden hinzugefügt, um Farben als Elementfarbwerte zu setzen.

In den folgenden Abschnitten werden wir nacheinander diese Farbmodelle besprechen.

RGBA-Farbwerte

Die Funktionssymbol rgba() kann verwendet werden, um Farben im RGBA-Modell (Rot, Grün, Blau, Alpha) zu setzen.-Green-Blue-alpha) to define colors. The RGBA color model is an extension of the RGB color model with an alpha channel, used to specify the opacity of the color.

The alpha parameter accepts values from 0.0 (completely transparent) to1.0 (completely transparent) value.

h1　{
　　　　color: rgba(0,0,255,0.5);
}
p {
　　　　background-color: rgba(0%,0%,100%,0.3);
}

HSL color values

Colors can also be defined using the hsl() function symbol in the HSL model (hue-Saturation-0). Hue is represented as an angle on a color wheel or circle (i.e., a rainbow represented as a circle), from 0 to360). The angle is given in fewer units because the angle is usually measured in degrees, so the unit is implicitly present in CSS.

Saturation and brightness are represented as percentages.100% saturation represents full color, and 0% is a gray shadow. However,100% brightness is white, 0% brightness is black,50% brightness is normal. See the following example:

h1　{
　　　　color: hsl(360,70%,60%);
}
p {
　　　　background-color: hsl(480,50%,80%);
}

HSLA color values

The hsla() function symbol can be used in the HSLA model (hue saturation-Brightness-alpha) to define colors. The HSLA color model is an extension of the HSL color model with an alpha channel, which specifies the opacity of the color.

The alpha parameter accepts values from 0.0 (completely transparent) to1.0 (completely transparent) value.

h1　{
　　　　color: hsla(360,80%,50%,0.5);
}
p {
　　　　background-color: hsla(480,60%,30%,0.3);
}