Heim > Artikel > Web-Frontend > Eine detaillierte Einführung in die Eigenschaft „Hintergrundgröße“ in CSS3

Eine detaillierte Einführung in die Eigenschaft „Hintergrundgröße“ in CSS3

php中世界最好的语言Original: 2017-11-30 16:34:492653Durchsuche

Wir wissen, dass es in CSS3 ein sehr wichtiges Attribut gibt, das bachground-size-Attribut. Seine Funktion besteht darin, die Größe des Hintergrundbilds zu definieren. Es gibt 5 Werte: Auto, Pixelwert, Prozentsatz, Abdeckung und Inhalt. Heute werde ich Ihnen beibringen, wie Sie das bachground-size-Attribut verwenden.

background-size:auto, der Standardwert, füllt das Element mit der Größe des Bildes selbst, passt seine eigenen Proportionen entsprechend der Größe des Elements an und verformt das Bild nicht.

CSS3 über das Attribut „Hintergrundgröße“

<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
}
</style></head><body>
<div></div></body></html>

2. Die Größe des Hintergrundbilds selbst – Breite: 200 Pixel, Höhe: 133 Pixel Der obige Code lautet wie folgt:

Pixelwerte, z. B. 30 Pixel und 50 Pixel, stellen jeweils die Breite und Höhe dar

CSS3 über das Hintergrundgrößenattribut

<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>background-size属性</title>
<style type="text/css">
div{
width:300px;
height:150px;
border:1px solid black;
background:url("photo.jpg") no-repeat;
background-size:250px 100px;
}
</style></head><body>
<div></div></body></html>

Ob Sie es glauben oder nicht: Nachdem Sie diese Fälle gelesen haben, beherrschen Sie die Methoden. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Tutorial zur Verwendung des Transformationsattributs in CSS3

Detaillierte Einführung in das Border-Image-Attribut in Css3

Mehrere Möglichkeiten zur Positionierung in Front-End-Projekten

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in die Eigenschaft „Hintergrundgröße“ in CSS3. 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

Vorheriger Artikel：Schritte zum Implementieren des rotierenden Halo-Effekts mit CSS3Nächster Artikel：Schritte zum Implementieren des rotierenden Halo-Effekts mit CSS3

In Verbindung stehende Artikel

Mehr sehen