Définition et utilisation de la propriété background-clip
La propriété background-clip spécifie la zone de l'arrière-plan qui sera colorée ou qui recevra l’image de fond.
Le tableau suivant résume le contexte des utilisations et l'historique des versions de cette propriété.
|
Valeur par défaut : |
border-box |
|
Héritée : |
No |
|
Animer : |
|
|
Version: |
CSS3 |
|
Syntaxe JavaScript : |
object.style.backgroundClip = " content-box" |
Appui des navigateurs de la propriété background-clip
Les nombres dans le tableau spécifient la version à partir du quelle le navigateur prend totalement en charge la propriété background-clip.
Propriété | Navigateur |
| | | | |
|
background-clip |
4.0 |
9.0 |
4.0 |
3.0 |
10.5 |
Syntaxe CSS de la propriété background-clip
background-clip: border-box|padding-box|content-box|initial|inherit;
Valeur | Description |
|---|---|
|
border-box |
Spécifie que l'arrière-plan s'étend jusqu’au bord extérieur de la frontière. Le Fond est tiré en dessous de la frontière. C'est la valeur par défaut. |
|
padding-box |
Spécifie que l'arrière-plan s'étend vers le bord extérieur du rembourrage (padding). Le fond n'est tiré en dessous de la frontière. |
|
content-box |
Spécifie que l'arrière-plan est limité uniquement à la zone de contenu. L’arrière-plan ne s’étant pas sous la zone de bordure et de padding. |
|
initial |
Affecte à cette propriété sa valeur par défaut. |
|
inherit |
Si spécifié, l'élément associé prend la valeur de la
propriété |
Exemple
Spécifiez le domaine de la coloration de l'arrière-plan :
Sélectionner le code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of CSS3 Background Clipping</title>
<style type="text/css">
.box {
width: 200px;
padding: 10px;
border: 6px dashed #333;
background: lime;
}
.box1 {
background-clip: border-box;
}
.box2 {
background-clip: padding-box;
}
.box3 {
background-clip: content-box;
}
</style>
</head>
<body>
<h2>background-clip Utilisant border-box valeur par
défaut</h2>
<div class="box box1"> la coloration de l'arriére plan est
etiré <br>jusqu'au bord extérieur des frontiéres</div>
<h2>background-clip Utilisant padding-box</h2>
<div class="box box2">la coloration de l'arriére plan est
etiré <br>jusqu'au bord extérieur du padding</div>
<h2>background-clip Utilisant content-box</h2>
<div class="box box3">la coloration de l'arriére plan est
limitée <br> à la zone du contenu</div>
</body>
</html>
Par Gerywa 11 Janvier 2016
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
