When CSS does not support writing multiple backgrounds in one tag, if you need multiple backgrounds, you need to add tags separately, and sometimes it is easy to confuse each level. Now, CSS3 supports multiple backgrounds.
This article explains in detail the new feature of CSS3 multiple backgrounds, which is really powerful.
1. The usage of multiple backgrounds
background:url(),url(),……
Multiple background images are separated by commas, and the higher the image level, the higher the level.
Each background image is written in the same way as the previous single background image. You can specify the tiling method, position and so on of the picture.
HTML：
<div id="fruit"> </div>
CSS：
#fruit{
width:700px;
height:385px;
background:url(images/strawberry.png) no-repeat 25%
top,url(images/watermelon.png) no-repeat 25%
bottom,url(images/orange.png) no-repeat 75%
top,url(images/lemon.png) no-repeat 75%
bottom,url(images/bg.jpg);
}
Renderings:
2. The newly added property of CSS3 background background
- background-size background image size
- background-origin background starting position
- background-clip background range
1. background-size background size
Use background-size to control the size of the background image, and the unit can be a fixed pixel value or a percentage. If it is a percentage, relative to the size of the parent element, there are two attribute values of cover and contain.
grammar:
background-size:cover/contain/length/percentage
| value | describe |
|---|---|
| cover | The background image is proportionally scaled to completely cover the background area, and part of the background image may not be visible. Make sure the background area is completely covered. |
| contain | The background image is proportionally scaled to completely fit the background area, and the background area may be partially blank. Ensure that the background image is fully visible in the background area. |
| length | Specifies the size of the background image, which cannot be negative. The first value sets the width and the second sets the height. If only one value is set, the second value will be set to "auto", maintaining proportional scaling. |
| percentage | Sets the width and height of the background image as a percentage of the parent element. |
For example, it can be written in the following format, from the official MDN documentation:
/* 关键字 */
background-size: cover;
background-size: contain;
/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%;
background-size: 3em;
background-size: 12px;
background-size: auto;
/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
/* 逗号分隔的多个值：设置多重背景，每一个值对应一张背景图片 */
background-size: auto, auto; /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;
HTML：
<div id="box1">contain</div>
<div id="box2">cover</div>
<div id="box3">100px auto</div>
<div id="box4"></div>
CSS：
body{
font:1em "microsoft Yahei";
color:#333;
}
#box1,#box2,#box3{
width:150px;
height:200px;
background:url(images/strawberry.png) no-repeat,url(images/bg.jpg);
float:left;
margin:0 1em 1em 0;
padding:0.5em;
}
#box1{
background-size:contain;
}
#box2{
background-size:cover;
}
#box3{
background-position:center;
background-size:100px auto,cover;
}
#box4{
clear:both;
position:relative;
width:700px;
height:200px;
background:url(images/corel.png),url(images/cloud-6.png),url(images/cloud-2.png),url(images/cloud-1.png),url(images/
aws-bg.jpg);
background-repeat:no-repeat;
background-size:40px auto,70% auto,45% auto,30% auto,contain;
background-position:2em center,150% 0px,0 -20px,-20px top, 0 0;
}
Renderings:
This property can produce great effects when combined with radioactivity, linear gradients, background tiling, and more.
If you don't understand this effect, you can add background-repeat: no-repeat , and you can see the principle well.
CSS：
html,body{
height:100%;
}
body{
background-color:#D11C16;
background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%),radial-gradient(closest-side,
transparent 98%, rgba(0,0,0,.3) 99%);
background-size:80px 80px;
background-position:0 0,40px 40px;
}
Renderings:
2, background-origin background starting position
The background-origin attribute specifies where the background-position attribute is positioned relative to. The default value is padding-box.
grammar:
background-origin ： border-box | padding-box | content-box;
Note: This property has no effect if the background-attachment property of the background image is "fixed". If the background is not no-repeat, this property has no effect, it will be displayed from the border.
The extent of a box model consists of the content area, padding area, and border area. The starting position of the background image can be controlled by the background-origin property.
HTML：
<div class="box bg1">border-box</div>
<div class="box bg2">padding-box</div>
<div class="box bg3">content-box</div>
CSS：
.box{
box-sizing:border-box;
width:220px;
height:220px;
border:12px solid rgba(0,0,0,.5);
padding:10px;
background:url(images/fengjing.jpg) no-repeat; /*必须是no-repeat，background-origin才有效*/
margin:10px;
float:left;
color:#fff;
}
.bg1{
background-origin:border-box; /*背景图片从边框开始*/
}
.bg2{
background-origin:padding-box; /*从内边距开始*/
}
.bg3{
background-origin:content-box; /*从内容区开始*/
}
Renderings:
3. The background-clip attribute specifies the display area of the background
grammar:
background-clip: border-box|padding-box|content-box|text;
The default is border-box.
When the background is larger than the area to be displayed, this property can be used to crop, so that the background is only displayed in a certain area.
- border-box: The background is clipped to display within the border.
- padding-box: The background is clipped to display within the padding range.
- content-box: The background is clipped to the content area for display.
- text: The background is cropped to be displayed in the text area.
Works great with background-origin.
HTML：
<div class="box bg1">border-box</div>
<div class="box bg2">padding-box</div>
<div class="box bg3">content-box</div>
CSS：
.box{
box-sizing:border-box;
width:220px;
height:220px;
border:12px solid rgba(0,0,0,.5);
padding:10px;
background:url(images/fengjing.jpg) no-repeat center;
/*必须是no-repeat，background-origin才有效*/
margin-right:10px;
float:left;
color:#fff;
}
.bg1{
background-origin:border-box; /*背景图片从边框开始*/
}
.bg2{
background-origin:padding-box; /*从内边距开始*/
background-clip:padding-box; /*背景图片裁剪在padding内边距范围内*/
}
.bg3{
background-origin:content-box; /*从内容区开始*/
background-clip:content-box;/*背景图片裁剪在内容区范围内*/
}
Renderings:
background-clip: text background is displayed inside the text
The last text attribute value has a compatibility problem, as shown in the figure:
So, the normal way of writing is:
background-clip: text;
-webkit-background-clip: text;
color: transparent; /*文字颜色一定要透明，否则看不到下面的背景*/
Most browsers require the -webkit prefix.
It can realize that the background is only displayed in the text part, the text is transparent, and the background image is exposed, which can achieve a good masking effect. And the effect of spot movement combined with linear gradient.
In order to avoid compatibility issues, such as IE series does not support, this time the text is transparent again, then you can use the private property of the text: -webkit-text-fill-color:transparent;
Combining with animation can achieve the effect of seamless scrolling.
There is a detail that needs attention. When the background positioning uses a percentage, it should be noted that the final xy coordinate needs to be recalculated, especially when the value is negative.
background-postion:x y;
x: {container (container) width - background image width}*x percentage, the excess part is hidden.
y: {container (container) height - background image height}*y percentage, the excess part is hidden.
So when background-size is set to 200%, background-position:-100% 0, the calculated x value may be positive.
Let's say the width of the parent container is 600px.
x:(600px-1200px)*(-100%)=600px
Take this into account when animating seamless scrolling.
HTML：
<div class="box bg1">这是一段有背景图片的文字</div>
<div class="box bg2">这是一段渐变色无缝滚动的文字</div>
CSS：
.bg1{
background:url(images/fengjing.jpg) center -50px;
}
.bg2{
background:linear-gradient(to right,#0250c5 0%,#d43f8d 25%,#0250c5 50%,#d43f8d 75%,#0250c5 100%);
background-size:200% auto;
animation:move 3s linear infinite;
}
.box{
width:700px;
height:100px;
margin:20px auto;
font:bold 3rem "microsoft Yahei";
line-height:100px;
text-align:center;
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
@keyframes move{
0%{
background-position:0 0;
}
100%{
background-position:-100% 0;
}
}
Renderings:
