Nouvel attribut d'arrière-plan en CSS3
CSS3 a apporté quelques modifications à l'arrière-plan. La plus évidente est de définir plusieurs arrière-plans. Il ajoute non seulement 4 nouveaux attributs, mais ajuste et améliore également les attributs actuels.
Plusieurs images d'arrière-plan
En CSS3, vous pouvez appliquer plusieurs images d'arrière-plan dans un seul élément de balise. Le code est similaire à la version css2.0, mais les images référencées doivent être séparées par des virgules ",". La première image est l'arrière-plan positionné en haut de l'élément, et les images d'arrière-plan suivantes sont affichées tour à tour en dessous, comme suit :
background-image: url(top-image.jpg), url(middle -image.jpg), url(bottom-image.jpg);
Nouvel attribut : Clip d'arrière-plan
(1)background-clip: border; L'arrière-plan commence à s'afficher sous la bordure border
(2)background-clip: padding; pas sous la bordure
(3)background-clip: content; L'arrière-plan commence à s'afficher sous la zone de contenu, pas sous la bordure ou le remplissage.
(4)background-clip: no-clip;Valeur d'attribut par défaut, similaire à background-clip: border;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.back {
border: 10px dotted black;
padding: 35px;
background: blue;
}
.back1 {
border: 10px dotted black;
padding: 35px;
background: blue;
background-clip: padding-box;
}
.back2 {
border: 10px dotted black;
padding: 35px;
background: blue;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="back"></div>
<br>
<div class="back1"></div>
<br>
<div class="back2"></div>
<br>
</body>
</html>Nouvel attribut : Background Origin
Cet attribut doit être utilisé conjointement avec background-position. Vous pouvez utiliser background-position pour calculer le positionnement à partir de la bordure, du remplissage ou de la zone de contenu des zones de contenu. (Semblable à background-clip)
(1)background-origin: border; À partir de la position de bordure
(2)background-origin: padding; (3) background-origin : content ; Comptage à partir de la position de la zone de contenu de la boîte de contenu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.sample1,.sample2,.sample3{
margin:20px;
padding:15px;
border: dashed 15px #993300;
width:450px;
height:150px;
color:#fff;
background:url(https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg) no-repeat;
}
.sample1 {
-moz-background-origin:border;
background-origin:border-box;
}
.sample2 {
-moz-background-origin:padding;
background-origin:padding-box;
}
.sample3 {
-moz-background-origin:content;
background-origin:content-box;
}
</style>
</head>
<body>
<div class="sample1"></div>
<br>
<div class="sample2"></div>
<br>
<div class="sample3"></div>
<br>
</body>
</html>Nouvel attribut : Taille de l'arrière-plan
La propriété Taille d'arrière-plan est utilisée pour réinitialiser votre image d'arrière-plan. Il existe plusieurs valeurs d'attribut :(1)background-size: contain; Réduisez l'image d'arrière-plan pour l'adapter à l'élément d'étiquette (principalement le rapport en pixels)
(2)background-size: cover; S'étend à toute la taille de l'élément d'étiquette (principalement le rapport de pixels)
(3)background-size : 100px 100px Indique la taille de la mise à l'échelle de l'image d'arrière-plan
(4)background-size : 50% 100%; Il s'agit de redimensionner la taille de l'image en fonction de la taille de l'élément de balise de contenu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
body
{
background:url(https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg);
background-size:100px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
<img src="https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg" alt="CSS3" width="400" height="200">
</p>
<p>上面两个图片对比</p>
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
