Heim > Artikel > Web-Frontend > Wie platziere ich ein Hintergrundbild mit ::before Pseudo-Selektor in CSS?

Wie platziere ich ein Hintergrundbild mit ::before Pseudo-Selektor in CSS?

王林nach vorne: 2023-08-19 20:21:182788Durchsuche

CSS enthält mehrere Pseudoselektoren, von denen „::before“ einer ist. Jeder Pseudo-Selektor von CSS ermöglicht es uns, HTML-Elemente mit unterschiedlichen Stilen zu gestalten.

Außerdem ermöglicht uns der Pseudo-Selektor „::before“, das Hintergrundbild für den jeweiligen HTML-Code einzurichten, was wir in diesem Tutorial lernen werden.

Bevor wir mit dem Tutorial beginnen, klären wir, dass „:before“ und „::before“ gleich sind. CSS2 verwendet „:before“, während CSS3 „::before“ verwendet.

Grammatik

Benutzer können den Pseudoselektor „::before“ verwenden, um das Hintergrundbild für ein bestimmtes HTML-Element gemäß der folgenden Syntax festzulegen.

.div::before {
   content: "";
   background-image: url("URL");
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   z-index: -1;
}

In der obigen Syntax haben wir den Selektor „::before“ mit dem CSS-Selektor verwendet. Tatsächlich fügt es Inhalt vor dem Element hinzu. Hier haben wir leere Inhalte verwendet, da wir keinen HTML-Inhalt festlegen müssen. Wir verwenden die Eigenschaft „background-image“, um das Hintergrundbild festzulegen, und die Eigenschaft „position“, um die Position des Hintergrundbilds festzulegen.

Beispiel 1 (Hintergrundbild mit dem Pseudoselektor „::before“ festlegen)

Im folgenden Beispiel haben wir ein div-Element erstellt, das die Klasse „background“ enthält. In CSS verwenden wir Klassennamen, um auf div-Elemente zuzugreifen und CSS-Stile anzuwenden. Zusätzlich haben wir den Klassennamen des div-Elements und den Pseudoselektor „::before“ verwendet, um das Hintergrundbild hinzuzufügen.

Wir stellen die obere, untere, linke und rechte Position im Selektor ein. Darüber hinaus haben wir einige Eigenschaften hinzugefügt, die sich auf das Hintergrundbild beziehen, um es zu manipulieren. In der Ausgabe kann der Benutzer das Hintergrundbild auf der gesamten Webseite beobachten.

<html>
<head>
   <style>
      .background {
         padding: 15px;
         margin-bottom: 15px;
         width: 500px;
         height: 500px;
         font-size: 20px;
         text-align: center;
      }
      .background::before {
         content: "";
         background-image: url("https://www.tutorialspoint.com/static/images/simply-easy-learning.png");
         position: absolute;
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
         background-repeat: no-repeat;
         background-position: center;
         background-size: 100%;
         z-index: -1;
      }
   </style>
</head>
<body>
   <h2> Using the <i> ::before psuedo selector </i> to place background image using CSS </h2>
   <div class = "background"> Welcome to the TutorialsPoint! </div>
</html>

Beispiel 2 (Hintergrundbild für bestimmtes div-Element festlegen)

Im folgenden Beispiel haben wir die Verwendung des Pseudoselektors „::before“ demonstriert, um das Hintergrundbild für das bestimmte div-Element festzulegen

Hier legen wir die Abmessungen für das Bild im Pseudo-Selektor fest, um das Hintergrundbild nur für ein bestimmtes div-Element festzulegen. Außerdem haben wir die Eigenschaft „background-size: cover“ verwendet.

In der Ausgabe sehen wir das div-Element, das das Hintergrundbild enthält, und nicht das gesamte div-Element.

<html>
<head>
   <style>
      .background {
         padding: 15px;
         margin-bottom: 15px;
         color: red;
         width: 500px;
         height: 500px;
         font-size: 20px;
         text-align: center;
         font-size: 3rem;
      }
      .background::before {
         content: "";
         background-image: url("https://www.tutorialspoint.com/static/images/simply-easy-learning.png");
         position: absolute;
         background-repeat: no-repeat;
         background-position: center;
         width: 500px;
         height: 500px;
         background-size: cover;
         z-index: -1;
      }
   </style>
</head>
<body>
   <h2> Using the <i> ::before psuedo selector </i> to place background image using CSS </h2>
   <div class = "background"> We set the linear gradient on the background image. </div>
</html>

Beispiel 3 (Einrichten des linearen Farbverlaufs als Hintergrund mithilfe des Selektors „::before“)

Im folgenden Beispiel verwenden wir den Pseudoselektor „::before“, um einen linearen Farbverlauf für den Hintergrund eines bestimmten HTML-Elements festzulegen. Hier verwenden wir die Funktion linear-gradient() als Wert der Eigenschaft „background“, um den Farbverlauf auf den Hintergrund statt auf das Bild festzulegen.

In der Ausgabe können wir den Farbverlauf als Hintergrund des div-Elements sehen.

<html>
<head>
   <style>
      .background {
         width: 600px;
         height: 300px;
         position: relative;
         text-align: center;
         color: green;
         font-size: 30px;
         font-weight: bold;
         font-family: Arial, Helvetica, sans-serif;
         padding: 20px;
      }
      .background::before {
         content: "";
         background: linear-gradient(to right, red 0%, orange 50%, yellow 100%);
         background-size: cover;
         background-position: center;
         position: absolute;
         top: 0; left: 0; right: 0;  bottom: 0; opacity: .5;z-index: -1;
      }
   </style>
</head>
<body>
   <h2> Using the <i> ::before psuedo selector </i> to place background image using CSS </h2>
   <div class = "background"> We have set the linear gradient for this div element using the '::before' pseudo selector. </div>
</html>

Wir haben gelernt, das Hintergrundbild mithilfe des Pseudoselektors „::before“ festzulegen. Wenn wir einen Pseudoselektor zum Hinzufügen von Inhalten zur Webseite verwenden, fügt dieser Inhalte unabhängig hinzu, indem er den Inhalt aus dem aktuellen Fluss der Webseite entfernt.

Wir können also Pseudo-Selektoren verwenden, um Inhalte zur Webseite hinzuzufügen, ohne den aktuellen Inhalt zu beeinträchtigen. Darüber hinaus können Inhalte über der Webseite hinzugefügt werden. Hier könnte auch ein Hintergrundbild über anderen Inhalten hinzugefügt werden, aber wir haben das „z-index“-Attribut verwendet, um das Bild als Hintergrund des div-Elements festzulegen.

Das obige ist der detaillierte Inhalt vonWie platziere ich ein Hintergrundbild mit ::before Pseudo-Selektor in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css css3 html for using Property this 选择器 position background

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie kann ich mithilfe von CSS die Höhe eines div-Tags an die Höhe des Browserfensters anpassen?Nächster Artikel：Wie kann ich mithilfe von CSS die Höhe eines div-Tags an die Höhe des Browserfensters anpassen?

In Verbindung stehende Artikel

Mehr sehen