Heim >Web-Frontend >CSS-Tutorial >Detaillierte Erläuterung der Eigenschaft „background-clip' in CSS
Detaillierte Erläuterung der Eigenschaft „background-clip' in CSS
- 小云云Original
- 2018-03-30 10:57:194636Durchsuche
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!