background-size 用法详解_html/css_WEB-ITnose
background-size属性用法详解:
此属性用来控制控制背景图片的大小，下面通过代码实例详细介绍一下此属性的用法，希望能够对需要的朋友带来一定的帮助。
Background-size属性具有两个参数（在这里先不把cover和contain计算在内），参数值既可以是精确数值形式也可以是百分比形式，也可以是默认的值auto，例如:
background-size:200px 100px;background-size:50% 50%;background-size:auto;
下面对Background-size属性的参数做一下简单的介绍:
如果只有一个参数，那么此值用来规定背景图片的宽度，这个时候背景图片的高度值是按照宽度进行等比例缩放。
如果提供两个参数，那么第一个参数用来规定背景图片的宽度，第二个参数用来规定背景图片的高度。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> ul li{ width:450px; height:300px; border:5px solid green; list-style:none; } .test{ background-image:url(mytest/demo/small.jpg); background-size:200px 100px; background-repeat:no-repeat; } </style> </head> <body> <ul> <li class="test"></li> </ul> </body> </html>Background-size属性带有两个参数，第一个参数规定背景图片的宽度为200px，第二个参数规定背景图片的高度为100px。
再看一段代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> ul li{ width:450px; height:300px; border:5px solid green; list-style:none; margin-top:10px;} .first{ background-image:url(mytest/demo/small.jpg); background-size:200px; background-repeat:no-repeat; } .second{ background-image:url(mytest/demo/small.jpg); background-size:600px; background-repeat:no-repeat; } </style> </head> <body> <ul> <li class="first"></li> <li class="second"></li> </ul> </body> </html>以上代码中，Background-size属性之规定了一个参数，那么这个参数用来规定背景图片的宽度，背景图片的高度根据宽度值进行等比例缩放，如果背景图片的尺寸超过容器，将会被裁切。
Background-size属性值如果是auto的时候，就是背景图片按照原尺寸显示，这里就不用实例演示了。
下面再来介绍一下此属性的cover和contain属性值。
一.cover属性:
将属性值设置为cover之后，将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器，不过超出的部分将会被裁切。
cover的英文也有覆盖的意思，说这一点就是有助于大家的记忆和理解。
代码实例如下:
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> ul li{ width:450px; height:300px; border:5px solid green; list-style:none; margin-top:10px;} .test{ background-image:url(mytest/demo/small.jpg); background-size:cover; background-repeat:no-repeat; } </style> </head> <body> <ul> <li class="test"></li> </ul> </body> </html>在以上代码中，背景图片可以最小程度的完全覆盖容器，如果背景图片的和容器的长宽比例不一样，那么必然会出现在横向或者纵向上超出容器的情况，那么超出的将会被隐藏。
一.contain属性:
此属性值可以将背景图片放大或者缩小。
和cover属性类似，都是可以将图片等比例放大或者缩小，但是cover是最小限度的将容器的覆盖，而contain只是要求某一个方位上将容器覆盖，比如纵向或者横向能够最小程度将容器覆盖。
代码示例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css"> ul li{ width:450px; height:300px; border:5px solid green; list-style:none; margin-top:10px;} .test{ background-image:url(mytest/demo/small.jpg); background-size:contain; background-repeat:no-repeat; } </style> </head> <body> <ul> <li class="test"></li> </ul> </body> </html>在以上代码中，背景图片进行了等比例缩放，由于在纵向上能够最先达到填充容器元素，所以在横向上就放弃尝试。
原文地址是:background-size 用法详解 一章节。
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Quel est le but du & lt; Progress & gt; élément?
Mar 21, 2025 pm 12:34 PM
L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex
Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?
Mar 20, 2025 pm 05:56 PM
L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.
Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement?
Mar 12, 2025 pm 04:05 PM
Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.
