Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Eigenschaft „background-clip“ in CSS

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

小云云Original: 2018-03-30 10:57:194550Durchsuche

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>

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>

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>

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>

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!

css chrome css3 padding border background

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erreichen Sie eine proportionale Skalierung der Höhe und Breite von DivsNächster Artikel：So erreichen Sie eine proportionale Skalierung der Höhe und Breite von Divs

In Verbindung stehende Artikel

Mehr sehen