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“
1.
<!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!
CSS3-Tutorial
Was sind die CSS3-Gradienteneigenschaften?
Welche Zeichensoftware gibt es?
Ist die Erfolgsquote des Standby-Tickets der Eisenbahn 12306 hoch?
So kaufen Sie echte Ripple-Münzen
So kündigen Sie ein Douyin-Konto bei Douyin
Verwendung von typedef in der C-Sprache
Was tun, wenn die CPU-Temperatur zu hoch ist?
