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

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

青灯夜游

Freigeben： 2019-01-30 14:06:22

Original

10492 Leute haben es durchsucht

Das Attribut „Hintergrundgröße“ wird verwendet, um die Größe des Hintergrundbilds festzulegen. Sie können die Bildgröße über den Längenwert oder den Prozentsatz festlegen oder „Cover“ und „Contain“ verwenden, um das Bild zu strecken.

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

CSS-Hintergrundgrößenattribut

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

Hinweis: Vor CSS3 wurde die Größe des Hintergrundbilds durch die tatsächliche Größe des Bildes bestimmt. In CSS3 kann die Größe des Hintergrundbilds angegeben werden, wodurch wir das Hintergrundbild in verschiedenen Umgebungen wiederverwenden können.

Syntax:

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

Nach dem Login kopieren

< tr class="ue-table-interlace-color-double">

Wert

Beschreibung

length

值	描述
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

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 eingestellt ist, wird der zweite Wert auf „auto“ gesetzt.

percentage

Legen Sie die Breite und Höhe des Hintergrundbilds als Prozentsatz des übergeordneten Bildes fest Element.

Der erste Wert legt die Breite fest und der zweite Wert legt die Höhe fest.

So verwenden Sie das Attribut „Hintergrundgröße. Wenn nur ein Wert eingestellt ist, wird der zweite Wert auf „auto“ gesetzt.

cover

Erweitern Sie das Hintergrundbild so, dass es groß genug ist, sodass das Hintergrundbild es vollständig abdeckt den Hintergrundbereich.

<🎜>Einige Teile des Hintergrundbilds werden möglicherweise nicht im Hintergrundankerbereich angezeigt. <🎜>

contain

Erweitern Sie das Bild auf seine maximale Größe, sodass seine Breite und Höhe vollständig in den Inhalt passen Bereich .

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

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background:url(https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}

</style>
</head>

<body>
<p>上面是缩小的背景图片。</p>

<p>原始图片：<img src="https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg" alt="Flowers"></p>

</body>
</html>

Nach dem Login kopieren

Rendering: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !

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