Heim >Web-Frontend >Front-End-Fragen und Antworten >So fügen Sie Bilder in CSS ein

So fügen Sie Bilder in CSS ein

藏色散人
藏色散人Original
2021-04-25 10:07:2646700Durchsuche

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>

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>

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

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn