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

Reines CSS3 zum Erzielen einer schönen Bibliothek im Stil einer Eingabefeldanimation (Texteingabeliebe)

Detaillierte Erklärung der neuen Hintergrundeigenschaften in CSS3

Reines CSS3 zum Erzielen einer schönen Bibliothek im Stil einer Eingabefeldanimation (Texteingabeliebe)

Ein Protokoll einer Notfallreaktion nach einem Einbruch in einen Linux-Server (Zusammenfassung)

CSS Zurück zum Anfang Codebeispiel

So verwenden Sie Maxwell zum Synchronisieren von MySQL-Daten in Echtzeit

Vue + Element zur dynamischen Anzeige von Hintergrunddaten zu Optionen

JS erkennt den Fall der Eliminierung von Sternen

Verwenden Sie Element+vue, um Start- und Endzeitlimits zu implementieren

Zusammenfassung der in MySQL häufig verwendeten Verkettungsanweisungen

Das Installationstutorial zu mysql5.5.28 ist super detailliert!

CSS-Code-Abkürzung div+css-Layout-Code-Abkürzungsspezifikation

Artikel empfehlen

Ein Beispiel für die vertikale Zentrierung von Unterelementen in Div mithilfe des Flex-Layouts

MySQL fügt automatisch Millionen simulierter Datenoperationscodes ein

Detaillierte Erklärung des Java-Aufrufs von ffmpeg zum Konvertieren des Videoformats in flv

Beispielcode zur Implementierung des Verlaufs-Tag-Menüs mit vue+elementui+vuex+sessionStorage

Node+Express zum Erzielen eines Paging-Effekts

So rufen Sie die Browser-Sharing-Funktion in Vue auf

So leeren Sie den Cache nach der Verwendung von Keep-Alive in Vue

Detaillierte Erklärung der Überwachungseigenschaften von Vue

So stellen Sie mit C++ eine Verbindung zu MySQL her

Zusammenfassung der Probleme mit der Mysql-connector-java-Treiberversion

Analyse eines MySQL-Deadlock-Szenariobeispiels

So überprüfen Sie, ob der Grafiktreiber erfolgreich in Ubuntu installiert wurde

Zusammenfassung der XHTML-Tags auf Blockebene

Semantisierung von HTML-Tags (einschließlich H5)

MySQL-Lernhinweise: Vollständiges Verwendungsbeispiel für Select-Anweisungen, detaillierte Erläuterung