clip d'arrière-plan

est utilisé pour recadrer de manière appropriée l'image d'arrière-plan en fonction des besoins réels.

Structure grammaticale :

clip d'arrière-plan : border-box|padding-box|content-box|no-clip

Cet attribut est utilisé pour spécifier les zones dans lesquelles l'image d'arrière-plan peut être affichée. Bien entendu, la zone qui peut être affichée est déterminée par la valeur de l'attribut.
1. Attribut border-box :
Cette valeur d'attribut stipule que l'image d'arrière-plan peut être affichée dans la plage de bordure. L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</title>
<style type="text/css">
ul li{
  border:10px dashed green;
  width:150px;
  height:100px;
  padding:10px;
  margin-top:10px;
  list-style:none;
  background-repeat:no-repeat;
}
.border-box{
  background-clip:border-box;
  background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
  <li class="border-box"></li>
</ul>
</body>
</html>

Le. Les performances du code ci-dessus peuvent être visibles. L'image d'arrière-plan peut être affichée dans la bordure, mais l'image d'arrière-plan n'est pas affichée dans les bordures gauche et supérieure. C'est parce qu'elle est limitée par l'attribut background-origin, car cela. L'attribut spécifie la zone à partir de laquelle l'image d'arrière-plan est dessinée, dans l'état par défaut, la zone de remplissage est dessinée (y compris le remplissage).
2. Attribut padding-box :
Cet attribut stipule que l'image d'arrière-plan peut être affichée dans la plage de remplissage. À l'heure actuelle, l'image d'arrière-plan ne peut pas être affichée dans la plage de bordure. L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</title>
<style type="text/css">
ul li{
  border:10px dashed green;
  width:150px;
  height:100px;
  padding:10px;
  margin-top:10px;
  list-style:none;
}
.padding-box{
  background-clip:padding-box;
  background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
  background-repeat:no-repeat
}
</style>
</head>
<body>
<ul class="test">
  <li class="padding-box"></li>
</ul>
</body>
</html>

Comme le montrent les performances du code ci-dessus, l'image d'arrière-plan peut être dessinée dans la plage de remplissage, mais pas dans la plage de bordure.
3.content-box :
Cet attribut stipule que l'image d'arrière-plan peut être affichée dans la zone de contenu, c'est-à-dire la zone hors remplissage et bordure. L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</title>
<style type="text/css">
ul li{
  border:10px dashed green;
  width:150px;
  height:100px;
  padding:10px;
  margin-top:10px;
  list-style:none;
}
.content-box{
  background-clip:content-box;
  background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
  background-repeat:no-repeat
}
</style>
</head>
<body>
<ul class="test">
  <li class="content-box"></li>
</ul>
</body>
</html>

Il ressort des performances du code ci-dessus que l'image d'arrière-plan ne peut être affichée que dans la plage de contenu pour le moment.
IV.tex :
Recadrez vers l'extérieur à partir de la forme du contenu de premier plan (comme le texte) comme zone de recadrage, c'est-à-dire que seule l'image d'arrière-plan est affichée sous la forme de le contenu du premier plan, par exemple, seul le texte est affiché en arrière-plan.
L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>background-clip属性-php中文网</title>
<style type="text/css">
ul li{
  border:10px dashed green;
  width:250px;
  height:200px;
  padding:10px;
  margin-top:10px;
  list-style:none;
  background-repeat:no-repeat;
  font-size:60px;
  font-weight:900
}
.border-box{
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; 
  /*color:transparent;*/
  background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg);
}
</style>
</head>
<body>
<ul class="test">
  <li class="border-box">php中文网</li>
</ul>
</body>
</html>

Comme le montrent les performances du code ci-dessus, l'image d'arrière-plan n'est affichée que dans le texte, mais il convient de noter que le texte-fill- la couleur ou la valeur de l'attribut de couleur du texte doit être définie sur transparent, sinon l'image d'arrière-plan sera bloquée.

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ask.php.cn/" /> <title>background-clip属性-php中文网</title> <style type="text/css"> ul li{ border:10px dashed green; width:250px; height:200px; padding:10px; margin-top:10px; list-style:none; background-repeat:no-repeat; font-size:60px; font-weight:900 } .border-box{ -webkit-background-clip:text; -webkit-text-fill-color:transparent; /*color:transparent;*/ background-image:url(http://cdn.duitang.com/uploads/item/201309/22/20130922202150_ntvAB.thumb.600_0.jpeg); } </style> </head> <body> <ul class="test"> <li class="border-box">php中文网</li> </ul> </body> </html>

soumettre Réinitialiser le code

Opération automatique

clip d'arrière-plan

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]