Heim >Web-Frontend >CSS-Tutorial >So legen Sie die Hintergrundbildgröße in CSS fest
So legen Sie die Hintergrundbildgröße in CSS fest
- 青灯夜游Original
- 2021-03-31 16:35:3512871Durchsuche
In CSS können Sie das Attribut „background-size“ verwenden, um die Größe des Hintergrundbilds festzulegen; das Syntaxformat ist „background-size:length|%|cover|contain;“ und der Standardwert ist „auto“.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer. „css legt die Hintergrundbildgröße fest.“ Hintergrund Bild.
Syntax
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: url(img/1.jpg);
background-size: 80px 60px;
background-repeat: no-repeat;
padding-top: 40px;
}
</style>
</head>
<body>
<p>
Lorem ipsum，中文又称“乱数假文”， 是指一篇常用于排版设计领域的拉丁文文章 ，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。
</p>
<p>原始图片: <img src="img/1.jpg" alt="Flowers" width="224" style="max-width:90%"></p>
</body>
</html>
Länge
Legen Sie die Höhe und Breite des Hintergrundbilds fest. Der erste Wert legt die Breite fest und der zweite Wert legt die Höhe fest. Wenn nur ein Wert angegeben wird und der zweite aufauto
(automatisch) eingestellt ist, berechnet
percentage
| cover | gesetzt, wodurch das Seitenverhältnis des Bildes beibehalten und das Bild auf die Mindestgröße skaliert wird, die den Hintergrundpositionierungsbereich vollständig abdeckt. |
|---|---|
| enthalten | Dadurch wird das Seitenverhältnis des Bildes beibehalten und das Bild auf die maximale Größe skaliert, die in den Hintergrundpositionierungsbereich passt. |
| Weitere Programmierkenntnisse finden Sie unter: | Programmiervideo! ! |
Das obige ist der detaillierte Inhalt vonSo legen Sie die Hintergrundbildgröße in CSS fest. 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：Was ist ein CSS-Selektor?Nächster Artikel：Was ist ein CSS-Selektor?