CSS3 Background (Background)

Using CSS3, you can apply multiple backgrounds to an element.

Using CSS3Background

CSS3It provides several new properties to manipulate the background of elements, such as background clipping, multiple backgrounds, and options to adjust the background size.

The next section will introduce you to CSS3All new background features inCSS BackgroundTutorial.

CSS3 background-size property

This background-The size property can be used to specify the size of the background image in CSS3Previously, the size of the background image was determined by the actual size of the image. The size of the background image can be specified using pixel or percentage values, as well as keywords such as auto, contain, and cover. Negative values are not allowed.

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

CSS3 background-clip property

background-The clip property can be used to specify whether the background of an element extends to the border. This background-The clip property can take three values: border-box, padding-box, content-box.

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

Please refer toCSS Box ModelTutorial to learn more about element boxes.

CSS3 background-origin property

This background-The origin property can be used to specify the positioning area of the background image. It can take the same values as background-clip property: 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;
}

CSS3multiple backgrounds

CSS3allows you to add multiple backgrounds to a single element. The backgrounds are stacked on top of each other. The number of layers is determined bybackground-imageor backgroundThe number of comma-separated values in the shorthand properties determines.

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

the first value in the comma-separated list of the background（i.e.,background-image“birds.png”）will be displayed at the top, while the last value（i.e., the “lightblue” color）will be displayed at the bottom. Only the last background can containbackground-color.