CSS3 has made some changes to the background. The most obvious one is to set multiple backgrounds. It not only adds 4 new attributes, but also adjusts and enhances the current attributes.
Multiple background images
In CSS3, you can apply multiple background images to a label element. The code is similar to the css2.0 version, but the referenced images need to be separated by "," commas. The first image is the background positioned at the top of the element, and subsequent background images are displayed below it in turn, as follows:
background-image: url(top-image.jpg), url(middle -image.jpg), url(bottom-image.jpg);
##New attribute: Background Clip
(1)background-clip: border; The background starts to display under the border border (2)background-clip: padding; The background starts to display under padding, not under the border border
(3)background-clip: content; The background starts displaying under the content area, not under the border or padding.
(4)background-clip: no-clip;Default property value, similar to background-clip: border;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.back {
border: 10px dotted black;
padding: 35px;
background: blue;
}
.back1 {
border: 10px dotted black;
padding: 35px;
background: blue;
background-clip: padding-box;
}
.back2 {
border: 10px dotted black;
padding: 35px;
background: blue;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="back"></div>
<br>
<div class="back1"></div>
<br>
<div class="back2"></div>
<br>
</body>
</html>New property: Background Origin
This attribute needs to be used in conjunction with background-position. You can use background-position to calculate positioning from the border, padding or content boxes content area. (Similar to background-clip) (1)background-origin: border; Counting from the border position
(2)Background-origin: padding; Counting from the padding position
(3) background-origin: content; Counting from the position of the content-box content area;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
.sample1,.sample2,.sample3{
margin:20px;
padding:15px;
border: dashed 15px #993300;
width:450px;
height:150px;
color:#fff;
background:url(https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg) no-repeat;
}
.sample1 {
-moz-background-origin:border;
background-origin:border-box;
}
.sample2 {
-moz-background-origin:padding;
background-origin:padding-box;
}
.sample3 {
-moz-background-origin:content;
background-origin:content-box;
}
</style>
</head>
<body>
<div class="sample1"></div>
<br>
<div class="sample2"></div>
<br>
<div class="sample3"></div>
<br>
</body>
</html>New attribute: Background Size
Background Size property is used to reset your background image. There are several attribute values:(1)background-size: contain; Reduce the background image to fit the label element (mainly the ratio of pixels)
(2)background-size: cover; Let the background image enlarge Extends to the entire label element size (mainly the pixel ratio)
(3)background-size: 100px 100px; Indicates the size of the background image scaling
(4)background-size: 50% 100%; Percentage It is to scale the size of the image according to the size of the content tag element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style type="text/css">
body
{
background:url(https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg);
background-size:100px 60px;
background-repeat:no-repeat;
padding-top:40px;
}
</style>
</head>
<body>
<p>
<img src="https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg" alt="CSS3" width="400" height="200">
</p>
<p>上面两个图片对比</p>
</body>
</html>