CSS3 Hintergrund (Background)

mit CSS3können mehrere Hintergründe auf ein Element angewendet werden.

mit CSS3Hintergrund

CSS3bietet einige neue Eigenschaften, um den Hintergrund von Elementen zu manipulieren, z.B. Hintergrundbeschnitt, mehrere Hintergründe und Optionen zur Anpassung der Hintergrundgröße.

Das nächste Kapitel wird Ihnen CSS3stehen alle neuen Hintergrundfunktionen zur Verfügung. Weitere mit dem Hintergrund verbundenen Eigenschaften finden Sie inCSS HintergrundTutorials.

CSS3 background-size-Eigenschaft

该background-Die size-Eigenschaft kann verwendet werden, um die Größe des Hintergrundbildes zu bestimmen. In CSS3Zuvor wurde die Größe des Hintergrundbildes durch die tatsächliche Größe des Bildes bestimmt. Die Größe des Hintergrundbildes kann in Pixeln oder Prozentwerten sowie mit Schlüsselwörtern wie auto, contain und cover angegeben werden. Negative Werte sind nicht erlaubt.

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　background:　url("images/sky.jpg)　no-repeat;
　　　　background-size: contain;
　　　　border:　6px fest #333;
}

CSS3 background-clip-Eigenschaft

background-Die clip-Eigenschaft kann verwendet werden, um zu bestimmen, ob der Hintergrund eines Elements bis zum Rand erstreckt wird. Die background-clip-Eigenschaft kann drei Werte annehmen: border-box，padding-box，content-box。

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　background: orange;
　　　　background-clip: content-box;
}

Bitte参阅CSS Box-Modell教程，以了解有关元素盒子的更多信息。

CSS3 background-origin属性

该background-origin属性可用于指定背景图像的定位区域。它可以采取相同的值background-clip属性：border-box，padding-box，content-box。

.box　{
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　background:　url("images/sky.jpg)　no-repeat;
　　　　background-size: contain;
　　　　background-origin: content-box;
}

CSS3多个背景

CSS3使您能够将多个背景添加到单个元素。背景相互层叠在一起。层数由background-image或 background速记属性中的逗号分隔值的数目确定。

.box　{
　　　　width:　100%;
　　　　height:　500px;
　　　　background:　url("images/birds.png)　no-repeat center,　url("images/clouds.png)　　no-repeat center, lightblue;
}

背景的逗号分隔列表中的第一个值（即background-image“ birds.png”）将显示在顶部，而最后一个值（即“ lightblue”颜色）将显示在底部。只有最后一个背景可以包含background-color。