Eine detaillierte Einführung in die Eigenschaft „Hintergrundgröße' in CSS3-CSS-Tutorial-php.cn

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

php中世界最好的语言

Freigeben： 2017-11-30 16:34:49

Original

2702 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!