Detaillierte Erläuterung der Eigenschaft „background-clip' in CSS-CSS-Tutorial-php.cn

Detaillierte Erläuterung der Eigenschaft „background-clip' in CSS

小云云

Freigeben： 2018-03-30 10:57:19

Original

4638 Leute haben es durchsucht

Dieser Artikel stellt Ihnen hauptsächlich die Rolle des Attributs „background-clip“ in CSS vor. Die beliebte Funktion des Attributs „background-clip“ besteht darin, den Bereich anzugeben, in dem sich der Hintergrund des Elements befindet Das Wissen über das Attribut „background-clip“ in CSS sollte einen Blick darauf werfen. Nun, ich hoffe, es hilft allen.

Die allgemeine Funktion des Attributs „background-clip“ besteht darin, den Bereich anzugeben, in dem sich der Hintergrund des Elements befindet.

1. box

border -box ist der Standardwert, was bedeutet, dass der Hintergrund des Elements den Hintergrund ab dem Randbereich (einschließlich des Randes) beibehält.

Der einfache Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Aus dem obigen Bild können wir erkennen, dass der Hintergrund des Elements standardmäßig im Rahmen und im Bereich darin vorhanden ist, aber ich weiß nicht, warum das Hintergrundbild nicht vollständig von der Hintergrundfarbe abgedeckt werden kann habe dieses Problem nicht.

2. padding-box

padding-box bedeutet, dass der Hintergrund des Elements innerhalb des Polsterbereichs (einschließlich Polsterung) erhalten bleibt.

Der einfache Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Auf dem Bild oben können wir sehen, dass das Hintergrundbild in der Polsterung und innerhalb des Bereichs vorhanden ist.

3. Content-Box

Content-Box bedeutet, dass der Hintergrund des Elements aus dem Inhaltsbereich erhalten bleibt.

Der einfache Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Aus dem Bild oben können wir erkennen, dass das Hintergrundbild im Inhaltsbereich vorhanden ist.

4. Text

content-box bedeutet, dass der Hintergrund des Elements im Vordergrundinhalt (Text) bleibt, der mit seiner Form und Größe übereinstimmt. Unterstützt derzeit nur den Chrome-Browser

Der einfache Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Erklärung: Der aktuelle Wert ist Text, die Kompatibilität ist extrem schlecht, wissen Sie es einfach.

Verwandte Empfehlungen:

CSS3-Tutorial: Hintergrundclip und Hintergrundursprung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Eigenschaft „background-clip' in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!