Heim > Artikel > Web-Frontend > So fügen Sie Bilder in CSS ein
So fügen Sie Bilder in CSS ein
- 藏色散人Original
- 2021-04-25 10:07:2646624Durchsuche
So fügen Sie Bilder in CSS ein: 1. Verwenden Sie beim Festlegen des Hintergrunds das Attribut „Hintergrundabkürzung“, um das Bild einzuführen. 2. Verwenden Sie direkt das Attribut „Hintergrundbild“, um das Hintergrundbild einzuführen.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Wie füge ich Bilder in CSS ein?
Mit der Entwicklung des Internets nimmt die Netzwerkgeschwindigkeit weiter zu und unsere aktuellen Webseiten sind nicht nur in der Lage, Text zu übertragen, sondern auch Bilder. Wie verwenden wir CSS, um Bilder auf Webseiten zu platzieren? Schauen wir uns an, wie man mit CSS Bilder auf Webseiten platziert.
CSS kann beim Festlegen des Hintergrunds das Attribut „Hintergrundabkürzung“ verwenden, um ein Bild einzuführen, oder Sie können das Attribut „Hintergrundbild“ verwenden, um ein Hintergrundbild einzuführen. Die Eigenschaft „Hintergrundbild“ legt das Hintergrundbild für das Element fest.
Verwenden Sie das Attribut „Hintergrundabkürzung“, um Bilder einzuführen:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body
{
background: #00ff00 url('img/3.jpg') no-repeat fixed center;
}
</style>
</head>
<body>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</body>
</html>Rendering:
Verwenden Sie das Attribut „Hintergrundbild“, um Bilder in die Webseite einzufügen:
<html>
<head>
<style type="text/css">
body {background-image:url(/i/eg_bg_04.gif);}
</style>
</head>
<body></body>
</html>Rendering:
Hintergrundabkürzungsattribut:
Hintergrund-Kurzeigenschaften legen alle Hintergrundeigenschaften in einer Deklaration fest.
Sie können die folgenden Attribute festlegen:
background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image
Wenn Sie keinen der Werte festlegen, ist beispielsweise auch „background:#ff0000 url('smiley.gif');“ zulässig.
Es wird generell empfohlen, dieses Attribut zu verwenden, anstatt einzelne Attribute separat zu verwenden, da dieses Attribut in älteren Browsern besser unterstützt wird und weniger Buchstaben eingegeben werden müssen.
background-image-Attribut: Das
background-image-Attribut legt das Hintergrundbild für das Element fest.
Der Hintergrund eines Elements nimmt die gesamte Größe des Elements ein, einschließlich Polsterung und Rändern, jedoch keine Ränder.
Standardmäßig wird das Hintergrundbild in der oberen linken Ecke des Elements platziert und wiederholt sich horizontal und vertikal.
Tipp: Bitte legen Sie eine verfügbare Hintergrundfarbe fest, damit die Seite gute visuelle Effekte erzielen kann, auch wenn das Hintergrundbild nicht verfügbar ist.
Attributwert:
url('URL') Pfad, der auf das Bild zeigt.
kein Standardwert. Es wird kein Hintergrundbild angezeigt.
inherit gibt an, dass die Einstellung der Eigenschaft „Hintergrundbild“ vom übergeordneten Element geerbt werden soll.
【Empfohlenes Lernen: CSS-Video-Tutorial】
Das obige ist der detaillierte Inhalt vonSo fügen Sie Bilder in CSS ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!