Heim >Web-Frontend >Front-End-Fragen und Antworten >Verwenden Sie CSS geschickt, um den Hintergrund-Zeichenbereich anzugeben
Verwenden Sie CSS geschickt, um den Hintergrund-Zeichenbereich anzugeben
- 醉折花枝作酒筹Original
- 2021-08-12 17:41:081728Durchsuche
Im vorherigen Artikel haben wir die Methode zum Fixieren des Hintergrundbilds im Ansichtsfenster kennengelernt. Weitere Informationen finden Sie unter „So befestigen Sie das Hintergrundbild geschickt mit CSS am Ansichtsfenster“. Dieses Mal lernen wir die Methode zum Festlegen des Hintergrundzeichenbereichs kennen. Sie können bei Bedarf darauf zurückgreifen.
Was sollen wir tun, wenn wir andere Anforderungen an den Hintergrund haben?
Schauen wir uns zunächst ein kleines Beispiel an.
<style>
*{
margin: 0;
padding: 0;
}
div{
background-color: cornsilk;
width: 300px;
height: 300px;
background-clip:content-box;
padding:50px;
border: 2px solid #ccc;
}
</style>
</head>
<body>
<div>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p>
<p>为了显示，表明这个一个div元素</p>
<p>为了显示，表明这个一个p元素</p>
</div>
</body>Das Ergebnis dieses kleinen Beispiels ist
Wir können sehen, dass die Hintergrundfarbe in diesem Beispiel das Feld nicht vollständig ausfüllt. Was ist los? Wenn wir uns den Code noch einmal ansehen, stellt sich heraus, dass wir background-clip:content-box; verwendet haben. background-clip:content-box;。
那我们就来看一个这个属性吧。
background-clip属性规定背景的绘制区域，它设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
如果没有设置背景图片（background-image）或背景颜色（background-color），那么这个属性只有在边框（border）被设置为非固实（soild）、透明或半透明时才能看到视觉效果（与border-style或border-image有关），否则，本属性产生的样式变化会被边框覆盖。
在这个属性的值有四个，分别是border-box、padding-box、content-box和text
background-image) oder die Hintergrundfarbe (background-color) nicht festgelegt ist, wird dieses Attribut nur im Rahmen () verwendet border ) ist auf nicht fest (soild), transparent oder durchscheinend (mit border-style oder border-image verbunden) eingestellt ), andernfalls werden die durch dieses Attribut erzeugten Stiländerungen durch den Rahmen überschrieben. 🎜🎜In diesem Attribut gibt es vier Werte, nämlich border-box, padding-box, content-box und text . Border-Box bedeutet, dass der Hintergrund bis zum äußeren Rand des Randes reicht (jedoch unterhalb des Randes); padding-box bedeutet, dass der Hintergrund bis zum äußeren Rand des Randes reicht. Es wird nicht bis zum Rand gezeichnet; Content-Box bedeutet, dass der Hintergrund auf den äußeren Rand des Inhaltsbereichs zugeschnitten wird (Content-Text bedeutet, dass der Hintergrund auf die Vordergrundfarbe des Texts zugeschnitten wird). 🎜🎜Empfohlenes Lernen: 🎜CSS-Video-Tutorial🎜🎜Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS geschickt, um den Hintergrund-Zeichenbereich anzugeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!