Heim > Artikel > Web-Frontend > Wie lege ich verschiedene Hintergrundeigenschaften in einer Anweisung fest?
Wie lege ich verschiedene Hintergrundeigenschaften in einer Anweisung fest?
- WBOYnach vorne
- 2023-09-15 09:45:021328Durchsuche
CSS (Cascading Style Sheets) ist ein leistungsstarkes Tool zum Entwerfen des visuellen Erscheinungsbilds Ihrer Website, einschließlich Hintergrundeigenschaften. Mithilfe von CSS können Sie die Hintergrundeigenschaften von Webseiten ganz einfach anpassen, einzigartige Designs erstellen und das Benutzererlebnis verbessern. Die Verwendung einer Deklaration ist eine effiziente Möglichkeit, verschiedene Hintergrundeigenschaften festzulegen, was Webentwicklern hilft, Zeit zu sparen und den Code sauber zu halten.
Hintergrundeigenschaften verstehen
Bevor wir mehrere Hintergrundeigenschaften in einer Deklaration festlegen, müssen wir die verschiedenen in CSS verfügbaren Hintergrundeigenschaften verstehen und verstehen, wie jede Eigenschaft funktioniert. Nachfolgend finden Sie eine kurze Übersicht über die einzelnen Immobilien.
Hintergrundfarbe − Dieses Attribut ermöglicht das Festlegen der Hintergrundfarbe des Elements.
Background-image – Dieses Attribut ermöglicht das Festlegen des Hintergrundbilds des Elements. Legen Sie ein Hintergrundbild mithilfe einer Bild-URL, eines linearen Farbverlaufs oder eines radialen Farbverlaufs fest.
Background-repeat − Mit dieser Eigenschaft können Sie festlegen, wie sich das Hintergrundbild wiederholt. Kann über Werte wie „Wiederholung“, „Wiederholung-x“, „Wiederholung-y“ und „keine Wiederholung“ gesteuert werden.
Background-position − Mit dieser Eigenschaft können Sie die Position des Hintergrundbilds festlegen. Hintergrundbilder können mithilfe von Werten wie oben, unten, links, rechts und mittig positioniert werden.
Background-size − Dieses Attribut ermöglicht das Festlegen der Größe des Hintergrundbilds. Die Größe des Hintergrundbilds kann mithilfe von „Automatisch“, „Overlay“, „Containment“ oder einem bestimmten Größenwert in Pixeln, Ems oder Prozent eingestellt werden.
Background-attachment – Mit dieser Eigenschaft können Sie festlegen, ob das Hintergrundbild mit der Seite scrollen oder fest bleiben soll.
Legen Sie verschiedene Hintergrundeigenschaften in einer Anweisung fest
Das abgekürzte Attribut „Hintergrund“ wird zum Festlegen mehrerer Hintergrundattribute verwendet, wodurch Hintergrundfarbe, Bild, Wiederholung, Position und Anhang in einer Deklaration festgelegt werden können.
Grammatik
selector {
background: [background-color] [background-image] [background-repeat] [background-position] [background-size] [background-attachment];
}
Die Reihenfolge der Attribute ist hier nicht wichtig, jedes Attribut wird durch ein Leerzeichen getrennt. Abhängig von den Designanforderungen kann eine weitere Eigenschaft in die Kurzformeigenschaft „Hintergrund“ aufgenommen werden.
Beispiel für das Festlegen mehrerer Hintergrundeigenschaften in einer Deklaration.
Jetzt sehen wir uns einige Beispiele für das Festlegen mehrerer Hintergrundeigenschaften in einer Deklaration an.
Beispiel 1: Hintergrundbild festlegen
Hier legen wir das Hintergrundbild im Body-Element mithilfe des Kurzattributs „background“ fest.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("https://www.tutorialspoint.com/dip/images/black_and_white.jpg") no-repeat center center fixed;
}
h3 {
text-align: center;
}
</style>
</head>
<body>
<h3>Setting a background image in the body element</h3>
</body>
</html>
Im obigen Beispiel legen wir das Hintergrundbild und die Hintergrundfarbe des Körperelements fest. Außerdem haben wir die Hintergrundposition auf zentriert eingestellt und das Hintergrundbild fixiert, damit es sich beim Scrollen nicht bewegt. Das „no-repeat“-Attribut sorgt dafür, dass sich das Hintergrundbild nicht wiederholt.
Beispiel 2: Verlaufshintergrund festlegen
Hier verwenden wir das Kurzschriftattribut „Hintergrund“, um einen Hintergrund mit Farbverlauf im Körperelement festzulegen.
<!DOCTYPE html>
<html>
<head>
<title>Setting the Gradient Background</title>
<style>
body {
background: linear-gradient(to top, #00cfff, #1e40ff);
}
h1,h3 {
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<h3>Setting the Gradient Background in the body element</h3>
</body>
</html>
Im obigen Beispiel haben wir die Funktion „linear-gradient“ verwendet, um einen Hintergrund mit Farbverlauf festzulegen. Der Parameter „to top“ gibt an, dass der Farbverlauf von unten nach oben verlaufen soll.
Beispiel 3 – Festlegen eines Hintergrundbilds in einem div-Element
Hier legen wir das Hintergrundbild im div-Element mithilfe des Kurzattributs „background“ fest.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
div {
background: lightblue url("https://www.tutorialspoint.com/dip/images/einstein.jpg") no-repeat center fixed;
height:300px;
width:250px;
margin:auto;
}
</style>
</head>
<body>
<h2>Setting the Background image for the div element</h2>
<div></div>
</body>
</html>
Im obigen Beispiel legen wir das Hintergrundbild und die Hintergrundfarbe des Körperelements fest. Außerdem haben wir die Hintergrundposition auf zentriert eingestellt und das Hintergrundbild fixiert, damit es sich beim Scrollen nicht bewegt.
Fazit
Im obigen Artikel haben wir das Festlegen von Hintergrundeigenschaften in einer einzigen Deklaration besprochen. Das Hintergrundattribut ist ein wichtiger Teil des Webseitenstils. Wir verwenden abgekürzte Eigenschaften, um mehrere Hintergrundeigenschaften in einer einzigen Deklaration festzulegen. Das Hintergrund-Kurzschriftattribut ist nützlich, um Zeit zu sparen und die Lesbarkeit des Codes zu verbessern.
Das obige ist der detaillierte Inhalt vonWie lege ich verschiedene Hintergrundeigenschaften in einer Anweisung fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!