So fügen Sie Bilder in CSS ein-Front-End-Fragen und Antworten-php.cn

So fügen Sie Bilder in CSS ein

藏色散人

Freigeben： 2023-01-05 16:11:07

Original

46650 Leute haben es durchsucht

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.

So fügen Sie Bilder in CSS ein

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(&#39;img/3.jpg&#39;) 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>

Nach dem Login kopieren

Rendering:

So fügen Sie Bilder in CSS ein

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>

Nach dem Login kopieren

Rendering:

So fügen Sie Bilder in CSS ein

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

Nach dem Login kopieren

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!