Unverzichtbare CSS-Wissenshintergrundeigenschaft

---

CSS ermöglicht die Verwendung von Volltonfarben als Hintergrund und ermöglicht auch die Verwendung von Bildern als Hintergrund.
Über Hintergrundeinstellungen:

• Hintergrundfarbe

   background-color:red;

  – Hinweis: Hintergrundfarbe kann nicht von erben und sein Standardwert ist transparent. Transparent bedeutet „transparent“. Das heißt, wenn ein Element keine Hintergrundfarbe angibt, ist der Hintergrund transparent, sodass der Hintergrund seiner Vorgängerelemente sichtbar ist.

• Hintergrundbild

   background-image:url(lks.jpg);

  – Hinweis: Hintergrundbilder können nicht vererbt und Hintergrundbilder können nicht festgelegt werden Größe.
  Browser-Unterstützung für Bildformate:

• GIF-Animation 256 Farben

• jpg satte Farben, Browser Der Unterstützungseffekt ist gut

• png w3c empfohlenes Format, aber die Browserunterstützung ist nicht sehr gut (IE6, IE7, nicht unterstützt).

• Hintergrundwiederholung

  background-repeat:repeat;        //默认 背景图像将在垂直方向和水平方向重复。
  background-repeat:repeat-x;      //背景图像将在水平方向重复。
  background-repeat:repeat-y;      //背景图像将在垂直方向重复。
  background-repeat:no-repeat;     //背景图像将仅显示一次。

• Hintergrundanhang

  background-attachment:scroll;    //默认值。背景图像会随着页面其余部分的滚动而移动。
  background-attachment:fixed;     //当页面的其余部分滚动时，背景图像不会移动。

• Hintergrundposition
  – Hinweis: Sie müssen einfügen Hintergrund Das Attribut -attachment muss auf „fixed“ gesetzt werden, um sicherzustellen, dass dieses Attribut in Firefox und Opera ordnungsgemäß funktioniert.

• Hintergrundposition: <a href="http://www.php.cn/wiki/904.html" target="_blank">top <code>background-position：<a href="http://www.php.cn/wiki/904.html" target="_blank">top</a> left；links
  Der erste bezieht sich auf die vertikale Richtung und der zweite bezieht sich auf die horizontale Richtung, getrennt durch Leerzeichen.
  Die vertikale Richtung kann eingestellt werden: oben, Mitte, unten;
  Die horizontale Richtung kann eingestellt werden: links, Mitte, rechts; Geben Sie ein Schlüsselwort an, dann ist der zweite Wert „center“.
  

• background-position：50% 50%；Standard: 0 % 0 %.
  Der erste Wert ist die horizontale Position und der zweite Wert ist die vertikale Position.
  Die obere linke Ecke ist 0 % 0 %. Die untere rechte Ecke ist 100 % 100 %.
  Wenn Sie nur einen Wert angeben, beträgt der andere Wert 50 %.
  

• background-position：20px 30px；Der erste Wert ist die horizontale Position und der zweite Wert ist die vertikale Position.
  Die obere linke Ecke ist 0 0. Einheiten sind Pixel (0px 0px) oder jede andere CSS-Einheit.
  Wenn Sie nur einen Wert angeben, beträgt der andere Wert 50 %.
  

Hinweis:

1. Wenn wir einen Rahmen für den Text festlegen, werden wir feststellen, dass der Rahmen nur den Inhalt im Text umschließt. Wenn Sie jedoch die Hintergrundfarbe für den Körper festlegen, wird der gesamte Bildschirm ausgefüllt.

2. Wenn Sie ein Bild als Hintergrund verwenden, wird das Bild in Bezug auf den
sichtbaren Bereich des Bildschirms positioniert, nicht auf den vom Rand eingerahmten Teil. 3. Wenn wir den Hintergrund sofort festlegen möchten, ist unsere Reihenfolge sehr sorgfältig.

background：red url(xin.jpg) norepeat fixed center center;Jeder Parameter wird durch Leerzeichen getrennt, gefolgt von Farbe, Bild, Wiederholung, Fixierungsmethode und Position.
Nachdem ich ihre Positionen im Browser umgekehrt hatte, stellte ich fest, dass IE6 und IE7 die Out-of-Order-Einstellungen nicht sehr gut unterstützen können, moderne Browser sie jedoch immer noch unterstützen können. Aus Kompatibilitätsgründen wird empfohlen, die obige Reihenfolge zu verwenden.

Willkommene Ergänzungen und Korrekturen☺

[Verwandte Empfehlungen]

1.

Kostenloses CSS-Online-Video-Tutorial

2.

CSS-Online-Handbuch

3.

php.cn Dugu Jiujian (2) - CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonUnverzichtbare CSS-Wissenshintergrundeigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!