So ändern Sie die Hintergrundfarbe in HTML-HTML-Tutorial-php.cn

So ändern Sie die Hintergrundfarbe in HTML

青灯夜游

Freigeben： 2023-01-06 11:14:40

Original

34035 Leute haben es durchsucht

In HTML können Sie die Hintergrundfarbe ändern, indem Sie das Style-Attribut des Label-Elements festlegen und den Stil „background-color: color value;“ hinzufügen, zum Beispiel „
".

So ändern Sie die Hintergrundfarbe in HTML

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

html Hintergrundfarbe ändern

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
	</head>

	<body style="background-color:red;"></body>

</html>

Nach dem Login kopieren

Rendering:

So ändern Sie die Hintergrundfarbe in HTML

Beschreibung:

Die Eigenschaft „Hintergrundfarbe“ legt die Hintergrundfarbe eines Elements fest. Der Hintergrund eines Elements ist die Gesamtgröße des Elements, einschließlich Innenabstand und Rändern (jedoch nicht der Ränder).

Grammatik:

background-color:颜色值;

Nach dem Login kopieren

Verschiedene Arten, Farbwerte zu schreiben:

1. Farbnamen verwenden

Obwohl es derzeit etwa 184 benannte Farben gibt, werden sie tatsächlich von verschiedenen Browsern unterstützt, und zwar nur 16 Farbnamen werden als CSS-Spezifikationen empfohlen, wie in der Tabelle unten gezeigt.

Tabelle 1: Von CSS-Spezifikationen empfohlene Farbnamen

/*名 称	颜 色	名 称	颜 色	名 称	颜 色
black	纯黑	silver	浅灰	navy	深蓝
blue	浅蓝	green	深绿	lime	浅绿
teal	靛青	aqua	天蓝	maroon	深红
red	大红	purple	深紫	fuchsia	品红
olive	褐黄	yellow	明黄	gray	深灰
white	壳白*/

Nach dem Login kopieren

Es wird nicht empfohlen, Farbnamen auf Webseiten zu verwenden, insbesondere bei der Verwendung in großem Maßstab, um zu vermeiden, dass einige Farbnamen von Browsern nicht analysiert werden oder dass verschiedene Browser Farben interpretieren anders.

2. Hexadezimale Farbe

Hex-Symbole #RRGGBB und #RGB (z. B. #ff0000). „#“, gefolgt von 6 oder 3 Hexadezimalzeichen (0-9, A-F).

Dies ist die am häufigsten verwendete Farbauswahlmethode, wie zum Beispiel:

#f03
#F03
#ff0033
#FF0033

Nach dem Login kopieren

3, RGB, Rot-Grün-Blau (RGB)

Gibt an, dass der Farbwert die Farbe des RGB-Codes ist, Funktionsformat For rgb(R,G,B), der Wert kann eine Ganzzahl oder ein Prozentsatz von 0-255 sein.

rgb(255,0,51)
rgb(255, 0, 51)
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)

Nach dem Login kopieren

Erweiterung: RGBA, Rot-Grün-Blau-Alpha (RGBa)

RGBA erweitert den RGB-Farbmodus, der einen Alphakanal enthält und es ermöglicht, die Transparenz einer Farbe festzulegen. a steht für Transparenz: 0=transparent; 1=undurchsichtig.

rgba(255,0,0,0.1)    /* 10% 不透明 */  
rgba(255,0,0,0.4)    /* 40% 不透明 */  
rgba(255,0,0,0.7)    /* 70% 不透明 */  
rgba(255,0,0,  1)    /* 不透明，即红色 */

Nach dem Login kopieren

4. HSL, Farbton-Sättigungs-Helligkeit (Hue-Saturation-Lightness)

Hue (Hue) stellt einen Winkel des Farbkreises dar (d. h. einen Ring, der einen Regenbogen darstellt).
Sättigung und Helligkeit werden in Prozent ausgedrückt.
100 % ist volle Sättigung, während 0 % eine Graustufe ist.
100 % Helligkeit ist weiß, 0 % Helligkeit ist schwarz und 50 % Helligkeit ist „normal“.

hsl(120,100%,25%)    /* 深绿色 */  
hsl(120,100%,50%)    /* 绿色 */       
hsl(120,100%,75%)    /* 浅绿色 */

Nach dem Login kopieren

Erweiterung: HSLA, Hue-Saturation-Lightness-Alpha (HSLa)

HSLa erweitert den HSL-Farbmodus, einschließlich des Alpha-Kanals, der die Transparenz einer Farbe festlegen kann. a steht für Transparenz: 0=transparent; 1=undurchsichtig.

hsla(240,100%,50%,0.05)   /* 5% 不透明 */   
hsla(240,100%,50%, 0.4)   /* 40% 不透明 */  
hsla(240,100%,50%, 0.7)   /* 70% 不透明 */  
hsla(240,100%,50%,   1)   /* 完全不透明 */

Nach dem Login kopieren

5. transparent

Spezieller Farbwert, der auf transparente Farbe hinweist. Kann direkt als Farbe verwendet werden.

Zum Beispiel: Farbe:transparent Stellen Sie die Schriftfarbe auf transparent ein

<style type="text/css">
    body{background:hsl(270,100%,50%)}
    p{
        font-size:50px;
        font-family:"黑体";
        /*浏览器私有属性*/
        -webkit-text-fill-color:transparent;/*设置文本透明*/
        /*使用rgba(0,0,0,0);也可以实现全透明模式*/
        -webkit-text-stroke:2px yellow;/*将文本设置透明，再设置个边框后就实现镂空字了*/
        /*W3C标准属性*/
        /*text-fill-color:transparent;*/
        /*text-stroke:2px yellow;*/
    
    }
</style>
<body>
    <p>2012年过去了，最忙的是元芳，你怎么看？</p>
</body>

Nach dem Login kopieren

Empfohlene Anleitungen: HTML-Videoanleitung, CSS-Videoanleitung

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Hintergrundfarbe in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!