Explication détaillée de la propriété background-clip en CSS-tutoriel CSS-php.cn

Explication détaillée de la propriété background-clip en CSS

小云云

Libérer： 2018-03-30 10:57:19

original

4568 Les gens l'ont consulté

Cet article vous présente principalement le rôle de l'attribut background-clip en CSS. La fonction populaire de l'attribut background-clip est de spécifier la zone où se trouve l'arrière-plan de l'élément. la connaissance de l'attribut background-clip en CSS devrait y jeter un œil. Eh bien, j'espère que cela aidera tout le monde.

La fonction commune de l'attribut background-clip est de spécifier la zone où se trouve l'arrière-plan de l'élément

1. box

border -box est la valeur par défaut, ce qui signifie que l'arrière-plan de l'élément conserve l'arrière-plan à partir de la zone de bordure (y compris la bordure).

Le code simple est le suivant :

<!doctype html>
<html>
    <head>
        <style>
        *{margin:0;padding:0;} 
            .box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat -5px;padding:5px;border:5px dotted #000;<br>　　　　　　　background-clip:border-box;}
        </style>
   </head>
   <body>
       <p class="box"></p>
   </body>
</html>

Copier après la connexion

L'effet est le suivant :

De Comme nous pouvons le voir sur l'image ci-dessus, l'arrière-plan de l'élément existe dans la bordure et la zone par défaut, mais je ne sais pas pourquoi l'image d'arrière-plan ne peut pas être complètement recouverte ; j'ai ce problème.

2. padding-box

padding-box signifie que l'arrière-plan de l'élément est conservé à l'intérieur de la zone de remplissage (y compris le remplissage).

Le code simple est le suivant :

<!doctype html>
<html>
    <head>
        <style>
        *{margin:0;padding:0;} 
            .box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat -5px;padding:5px;border:5px dotted #000;<br>            background-clip:padding-box;}
        </style>
   </head>
   <body>
       <p class="box"></p>
   </body>
</html>

Copier après la connexion

L'effet est le suivant :

Dans l'image ci-dessus, nous pouvons voir que l'image d'arrière-plan existe dans le remplissage et dans la zone.

3. content-box

content-box signifie que l'arrière-plan de l'élément est conservé dans la zone de contenu.

Le code simple est le suivant :

<!doctype html>
<html>
    <head>
        <style>
        *{margin:0;padding:0;} 
            .box{width:380px;height:280px;margin:100px auto;background:url("1.jpg") no-repeat -5px;padding:5px;border:5px dotted #000;<br>            background-clip:content-box;}
        </style>
   </head>
   <body>
       <p class="box"></p>
   </body>
</html>

Copier après la connexion

L'effet est le suivant :

D'après l'image ci-dessus, nous pouvons voir que l'image d'arrière-plan existe dans la zone de contenu.

4. text

content-box signifie que l'arrière-plan de l'élément reste au premier plan (texte), qui est le même que sa forme et sa taille. Actuellement, ne prend en charge que le navigateur Chrome

Le code simple est le suivant :

<!doctype html>
<html>
    <head>
        <style>
        *{margin:0;padding:0;} 
            .box{width:380px;height:280px;margin:100px auto;background:red;padding:5px;border:5px dotted #000;<br>             font-size:100px;font-weight；bold;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
        </style>
   </head>
   <body>
       <p class="box">你 好 你 好</p>
   </body>
</html>

Copier après la connexion

L'effet est le suivant :