Ausführliche Erklärung zum Hinzufügen von Hintergrundserien-Hintergrund in CSS3

1. Überprüfen Sie die Hintergrundeigenschaften, die wir zuvor gelernt haben

1.1 Hintergrundfarbe
1.2 Hintergrundbild
1.3 Hintergrundwiederholung
1.4 Hintergrundposition
1.5 Hintergrundanhang
1.6 Hintergrund

2. CSS3 neues Hintergrundattribut

2.1 Hintergrund-Ursprung
2.2 Mehrere Hintergründe
2.3 Hintergrundgröße

1.1 Hintergrundfarbenattribut: Hintergrundfarbe

Es gibt drei Möglichkeiten, Farbe auszudrücken: Wort, RGB-Notation, Sechzehn-Basis-Notation

1. Wort: Was in Worten ausgedrückt werden kann, sind einfache Farben

2. RGB-Notation

rgb repräsentiert die drei Grundfarben Farben „Rot“, „Grün“ und „Blau“.
Bei optischen Displays besteht jedes Pixel aus drei Grundfarben lichtemittierender Elemente, die je nach Helligkeit auf unterschiedliche Farben eingestellt werden.

Mit Kommas trennen, die Werte von r, g, b, jeder Wert reicht von 0 bis 255, insgesamt 256 Werte

绿色：
background-color: rgb(0,255,0);  
蓝色：
background-color: rgb(0,0,255);

黑色：（光学显示器，每个元件都不发光，黑色）
background-color: rgb(0,0,0);

3. Sechzehn-Basis-Notation

Alle Werte, die mit # beginnen, sind hexadezimal.

红色：
background-color: #ff0000;

16进制表示法，也是两位两位看，看r、g、b，但是没有逗号隔开。
ff就是10进制的255 ，00 就是10进制的0，00就是10进制的0。所以等价于rgb(255,0,0);

Ergänzung:
Grundzahlen im Dezimalsystem (insgesamt 10): 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
Grundzahlen im Hexadezimalformat (insgesamt 16): 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, d, e, f

Was stellt die Zahl 13 im Hexadezimalformat dar?
bedeutet 1 16 und 3 1s. Das ist 19. Dies ist das Konzept der Position. Die erste Person gibt an, wie viele 16er und die letzte Person gibt an, wie viele Einsen.

1.2 Hintergrundbild

wird verwendet, um ein Hintergrundbild Bild zur Box hinzuzufügen. Der Hintergrund ist natürlich ausgefüllt.

background:url(images/1.jpg);

1.3 Hintergrundwiederholung

Legen Sie fest, ob das Hintergrundbild wiederholt wiederholt wird.

Hintergrundwiederholung:keine Wiederholung; nicht wiederholen Hintergrundwiederholung:Wiederholung-x; vertikal wiederholen

1.4 Hintergrundposition

Hintergrundpositionierungsattribut

background-position:向右移动量 向下移动量

wird mit Worten beschrieben:

beschreibt die linken und rechten Wörter: links, Mitte, rechts
Beschreibung Wörter nach oben und unten: oben, Mitte, unten

右下角：background-position: right bottom;

1.5 Ob das Hintergrundbild scrollt (Hintergrundanhang)

scrollen: scrollen. Standardwert behoben: behoben. Scrollt nicht, wenn die Bildlaufleiste lokal scrollt

1.6 Hintergrund-Umfassendes Attribut

Das Hintergrund-Attribut ist dasselbe wie bOrdnunger, es ist ein umfassendes Attribut:

background:red url(1.jpg) no-repeat 100px 100px fixed;

等价于：
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;

Sie können jeden Teil weglassen:

background: red;

Wenn das Feld ein Hintergrundbild und eine Hintergrundfarbe hat. Tatsächlich werden hauptsächlich Bilder angezeigt, und die reichhaltigen Stellen sind mit Farben gefüllt.

background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;

2.1 Hintergrund-Ursprung des Hintergrundbildes

border-box: Ignorieren Sie den Rand und beginnen Sie direkt am Startpunkt 0, 0 der Randkachel padding-box: Standardwert, Polsterung ignorieren, Kachelung direkt ab dem Startpunkt 0,0 der Polsterung beginnen content-box: Vom Inhaltsteil aus Beim Kacheln Beginnt, wird eine Polsterposition reserviert. Das Auffüllen wirkt sich also darauf aus.

2.2 Mehrere Hintergründe

CSS3 – neuer Hintergrundserienhintergrund. Hintergrundbilder werden durch Kommas getrennt und Sie können mehrere Gruppen schreiben. Das zuerst gerenderte Bild kann das später gerenderte Bild verdecken.

background:  url(images/1.jpg) 0 0 no-repeat,url(images/2.jpg) 121px 0 no-repeat,url(images/3.jpg) 242px 0 no-repeat;

2.3 Steuern Sie die Größe des Hintergrundbilds (background-size)

background-size: value

Value:

* *Längenwert**px Prozentsatz: basierend auf der Boxbreite auto: die tatsächliche Größe des Hintergrundbilds

enthalten: vollständig anzeigen (wenn die Breite oder Höhe des Bildes beim Skalieren den Rand der Box „berührt“, wird die Änderung gestoppt)

abdecken: vollständig abgedeckt Voll (Skalieren Sie das Hintergrundbild so, dass es den Container vollständig abdeckt. Das Hintergrundbild kann den Container überschreiten)

Wenn nur ein Wert vorhanden ist, z. B. die Breite, um eine Streckung zu erreichen, Die Höhe wird standardmäßig auf „Auto“ eingestellt, wobei gleiche Proportionen beibehalten werden.
Wenn zwei Werte vorhanden sind, werden Breite und Höhe jeweils auf die entsprechenden Werte gedehnt und möglicherweise verformt.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung zum Hinzufügen von Hintergrundserien-Hintergrund in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!