Detaillierte Erklärung der neuen Hintergrundeigenschaften in CSS3

Bisher kannten wir mehrere Hintergrundattribute in CSS: Farbe, Bild, Wiederholung, Anhang, Position. Diese werden in CSS häufig verwendet. Welche neuen Attribute wurden also in CSS3 hinzugefügt? Schau nach unten:

Neue CSS3-Eigenschaften: background-clip, background-origin, background-size

1.Hintergrund-Clip

Die Clipping-Eigenschaft des Hintergrunds besteht darin, mit dem Zeichnen an der angegebenen Position zu beginnen.

2.Hintergrund-Ursprung

Die Eigenschaft „background-origin“ gibt den Bereich an, in dem das Hintergrundbild positioniert wird.

** Die beiden obigen Eigenschaftswerte sind Border-Box, Padding-Box und Content-Box (es wird empfohlen, über ausreichende Kenntnisse des Box-Modells zu verfügen. Schauen Sie sich also einfach diese drei Eigenschaftswerte hier an, dann wird es klar) oder sehen Sie sich das folgende Bild an:

Bildbeschreibung hier einfügen

Background-Clip entspricht dem Starten des Clippings an einer dieser drei Positionen, um den entsprechenden Effekt zu erzielen. Siehe den Code

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
  <Stil>
    #div1 {
      Rand: 20px gestrichelt blau;
      Polsterung: 40px;
      Hintergrund: rot;
    }

    #div2{
      Rand: 20px gestrichelt blau;
      Polsterung: 40px;
      Hintergrund: rot;
      Hintergrundclip: Polsterbox;
    }

    #div3{
      Rand: 20px gestrichelt blau;
      Polsterung: 40px;
      Hintergrund: rot;
      Hintergrundclip: Inhaltsbox;
    }
  </Stil>
</Kopf>
<Text>

<p>Kein Hintergrund-Clipping (Rahmen nicht definiert):</p>
<div id="div1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Ich saß einfach nur da, fühlte mich so unwohl und war so müde.</p>
</div>

<p>Hintergrundclip: Polsterbox:</p>
<div id="div2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Ich saß einfach nur da, fühlte mich so unwohl und war so müde.</p>
</div>

<p>Hintergrundclip: Inhaltsbox:</p>
<div id="div3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Ich saß einfach nur da, fühlte mich so unwohl und war so müde.</p>
</div>
</body>
</html>

Effektbild:

Bildbeschreibung hier einfügen

Und background-origin ist der Bereich, in dem der Hintergrund angezeigt wird. Siehe den Code

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Titel</title>
  <Stil>
    div
    {
      Rand: 1px, durchgehend schwarz;
      Polsterung: 35px;
      background-image:url('1 (5).jpg');/*Wenn das Bild nicht angezeigt werden kann, müssen Sie es selbst ändern*/
      Hintergrundwiederholung: keine Wiederholung;
      Hintergrundposition: links;
    }
    #div1 {
      background-origin: border-box;/*Das Setzen einer padding-box hat den gleichen Effekt, Sie können es selbst ausprobieren*/
    }
    #div2 {
      Hintergrundherkunft: Inhaltsbox;
    }
  </Stil>
</Kopf>
<Text>
<p>Relative Position des Begrenzungsrahmens des Hintergrundbilds</p>
<div id="div1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Ich saß einfach nur da, fühlte mich so unwohl und war so müde.</p>
</div>
<p>Das Hintergrundbild wird relativ zum Inhaltsfeld positioniert</p>
<div id="div2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Ich saß einfach nur da, fühlte mich so unwohl und war so müde.</p>
</div>
</body>
</html>

Wirkung:

Bildbeschreibung hier einfügen

3.Hintergrundgröße

Hintergrundgröße gibt die Größe des Hintergrundbildes an. Vor CSS3 wurde die Größe eines Hintergrundbildes durch die tatsächliche Größe des Bildes bestimmt. Mit der Eigenschaft „background-size“ in CSS3 können wir die Größe von Hintergrundbildern in verschiedenen Umgebungen ändern. Sie können die Größe in Pixeln oder Prozent angeben. Die von Ihnen angegebene Größe ist ein Prozentsatz im Verhältnis zur Breite und Höhe des übergeordneten Elements.

Seine Attributwerte:

①.length legt die Höhe und Breite des Hintergrundbildes fest. Der erste Wert legt die Breite fest, der zweite die Höhe. Wenn nur ein Wert angegeben ist, wird der zweite auf „auto“ gesetzt.

②.lpercentage berechnet den Prozentsatz relativ zum Hintergrundpositionierungsbereich. Der erste Wert legt die Breite fest, der zweite die Höhe. Wenn nur ein Wert angegeben ist, wird der zweite auf „auto“ gesetzt

③.cover behält das Seitenverhältnis des Bildes bei und skaliert das Bild auf die Mindestgröße, die den Hintergrundpositionierungsbereich vollständig abdeckt.

④.contain behält das Seitenverhältnis des Bildes bei und skaliert das Bild auf die maximale Größe, die in den Hintergrundpositionierungsbereich passt.

Zusammenfassen

Oben sind die neuen Hintergrundeigenschaften von CSS3, die ich Ihnen vorgestellt habe. Ich hoffe, sie sind hilfreich für Sie. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!

<<: Implementierung der MySQL-Datendesensibilisierung (Telefonnummer, ID-Karte)

>>: UCenter-Homepage fügt Statistikcode hinzu

So installieren Sie OpenSSH aus dem Quellcode in CentOS 7

Detaillierte Erklärung der neuen Hintergrundeigenschaften in CSS3

So installieren Sie OpenSSH aus dem Quellcode in CentOS 7

Fügen Sie dem Debian-Docker-Container geplante Crontab-Aufgaben hinzu

Eine kurze Diskussion über die integrierten Traversierungsmethoden von JS-Arrays und ihre Unterschiede

So lösen Sie das Problem ERROR 2003 (HY000) beim Starten von MySQL

Lösung für Ubuntu 18.04, das keine Verbindung zum Netzwerk in der virtuellen VMware-Maschine herstellen kann

Detaillierte Erläuterung der 4 gängigen Datenquellen in Spark SQL

Beispiel für einen Persistenzbetrieb mit Gearman + MySQL

Detaillierte Erklärung der Beziehung zwischen Vue und VueComponent

React implementiert Paging-Effekt

Ein Beispiel für den Unterschied zwischen den ID- und Name-Attributen in der Eingabe

Artikel empfehlen

Vue simuliert die Warenkorb-Abrechnungsfunktion

Detaillierte Erklärung der Lösung zum Vergessen des Passworts in MySQL 5.7

Analyse der Gründe, warum der Index bei der Suche im MySql-Bereich nicht wirksam wird

Detaillierte Erklärung der Unterschiede zwischen SQL Joint Query Inner Join, Outer Join und Cross Join

Eine detaillierte Einführung in den wget-Befehl in Linux

Lösung für das Problem, dass VC6.0 bei Installation unter WIN10 nicht verwendet werden kann

MySQL-Prozesssteuerung: IF()-, IFNULL()-, NULLIF()-, ISNULL()-Funktionen

Tutorial zur Installation von Docker im Windows 10-Subsystem Ubuntu (WSL) (mit Bildern und Text)

Erklären Sie kurz die Verwendung von „group by“ in SQL-Anweisungen

js-Methode zur Realisierung der Warenkorbberechnung

Das Konzept von MTR in MySQL

SVG+CSS3 zum Erzielen eines dynamischen Welleneffekts

3 verschiedene Möglichkeiten zum Löschen der Optionsoptionen im Auswahltag

So fügen Sie Nginx zu den Systemdiensten in CentOS7 hinzu

MySQL-Datenbank erstellen, Benutzer hinzufügen, Benutzerautorisierung, praktische Methode