Maison > Article > interface Web > Comment utiliser l'attribut background-size

Comment utiliser l'attribut background-size

青灯夜游original: 2019-01-30 14:06:2210472parcourir

L'attribut background-size est utilisé pour définir la taille de l'image d'arrière-plan. Vous pouvez définir la taille de l'image via la valeur de longueur ou le pourcentage, ou utiliser cover et contain pour étirer l'image.

Attribut CSS background-size

Fonction : Spécifie la taille de l'image d'arrière-plan.

Remarque : Avant CSS3, la taille de l'image d'arrière-plan était déterminée par la taille réelle de l'image. En CSS3, la taille de l'image d'arrière-plan peut être spécifiée, ce qui nous permet de réutiliser l'image d'arrière-plan dans différents environnements.

Syntaxe :

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

Valeur

Description

longueur

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

Définissez la hauteur et la largeur de l'image d'arrière-plan.

La première valeur définit la largeur et la deuxième valeur définit la hauteur. Si une seule valeur est définie, la deuxième valeur sera définie sur "auto".

pourcentage

Définissez la largeur et la hauteur de l'image d'arrière-plan en pourcentage du parent élément.

<!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>

La première valeur définit la largeur et la deuxième valeur définit la hauteur.

Si une seule valeur est définie, la deuxième valeur sera définie sur "auto". Comment utiliser lattribut background-size

cover

Agrandissez l'image d'arrière-plan pour qu'elle soit suffisamment grande pour qu'elle recouvre complètement la zone d’arrière-plan.

Certaines parties de l'image d'arrière-plan peuvent ne pas être affichées dans la zone d'ancrage d'arrière-plan.

contenir

Agrandir l'image à sa taille maximale afin que sa largeur et sa hauteur s'intègrent parfaitement dans le contenu zone .

Exemple d'utilisation de l'attribut CSS background-sizeRendu : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php css css3 auto Length background

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser l'attribut border-imageArticle suivant：Comment utiliser l'attribut border-image

Articles Liés

Voir plus