La propriété CSS background-clip

La propriété CSS background-clip spécifie si l’arrière-plan d'un élément, couleur ou image, s'étend jusqu’à la frontière ou non.

Les propriétés CSS

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 :

No  savoir plus sur l’animation

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

Google Chrome

Internet Explorer

Firefox

Safari

Opera

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é background-clip  de son parent.

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
  • HTML5, CSS3, JavaScript pour débutants Tome 1 HTML5, CSS3, JavaScript pour débutants Tome 1
    Premier tome d\'une série vidéo dédiée à l\'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    Objet QuickTime

    Objet QuickTime
    Ce chapitre décrit comment jouer des films avec l'objet QuickTime.

    fonction date_sunset">date_sunset()

    Retourne l’heure du coucher du soleil pour un jour et un endroit donnés

    Transformations 2D en CSS3

    Réaliser des transformations 2D avec CSS3