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.
- Recommandations de cours
- Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~ 