So verwenden Sie das CSS-Attribut „Hintergrundgröße'.-Front-End-Fragen und Antworten-php.cn

So verwenden Sie das CSS-Attribut „Hintergrundgröße'.

藏色散人

Freigeben： 2019-05-29 10:47:29

Original

4523 Leute haben es durchsucht

CSS-Attribut „Hintergrundgröße“ kann die Größe des Hintergrundbilds festlegen. Syntax: Hintergrundgröße: Länge|Prozentsatz|Abdeckung|Contain; Legen Sie die Bildgröße über den Längenwert oder den Prozentsatz fest oder skalieren Sie das Bild über Cover und Contain.

So verwenden Sie das CSS-Attribut „Hintergrundgröße'.

Wie verwende ich das CSS-Attribut „Hintergrundgröße“?

Funktion: Gibt die Größe des Hintergrundbilds an.

Syntax:

background-size: length|percentage|cover|contain;

Nach dem Login kopieren

Beschreibung:

Länge Legt die Höhe und Breite des Hintergrundbilds fest. Der erste Wert legt die Breite und der zweite Wert die Höhe fest. Wenn nur ein Wert eingestellt ist, wird der zweite Wert auf „auto“ gesetzt. Prozentsatz legt die Breite und Höhe des Hintergrundbilds als Prozentsatz des übergeordneten Elements fest.

Der erste Wert legt die Breite fest und der zweite Wert legt die Höhe fest. Wenn nur ein Wert eingestellt ist, wird der zweite Wert auf „auto“ gesetzt. cover Erweitert das Hintergrundbild so groß, dass das Hintergrundbild den Hintergrundbereich vollständig abdeckt. Einige Teile des Hintergrundbilds werden möglicherweise nicht im Hintergrundankerbereich angezeigt. include Erweitert das Bild auf seine maximale Größe, sodass seine Breite und Höhe vollständig in den Inhaltsbereich passen.

Hinweis: IE9+, Firefox 4+, Opera, Chrome und Safari 5+ unterstützen das Attribut „Hintergrundgröße“.

Beispiel für die Verwendung des CSS-Attributs „Hintergrundgröße“

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background:url(&#39;https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg&#39;);
background-size:100px 63px;
-moz-background-size:100px 63px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>
<body>
<p>上面是缩小的背景图片。</p>
<p>原始图片：<img src="https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg" alt="Flowers"></p>
</body>
</html>

Nach dem Login kopieren

Effektausgabe:

So verwenden Sie das CSS-Attribut „Hintergrundgröße.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Attribut „Hintergrundgröße'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!