章节(23) 背景相关

一. 背景尺寸属性

1.什么是背景尺寸属性
背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小

background-size:xxxx;

取值:

1.具体像素 >> background-size:200px 100px;

2.百分比 >> background-size:100% 80%;

3.宽度等比拉伸 >> background-size:auto 100px;

4.高度等比拉伸 >> background-size:100px auto;

5.cover >> background-size:cover;

• 5.1告诉系统图片需要等比拉伸
• 5.2告诉系统图片需要拉伸到宽度和高度都填满元素

6. contain >> background-size:contain;

• 6.1告诉系统图片需要等比拉伸
• 6.2告诉系统图片需要拉伸到宽度或高度都填满元素(只保证一边填满)

background-size

二. 背景图片定位区域属性

background-origin : 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示;

取值:

1.padding-box:默认值 >>background-origin: padding-box; 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示;
2.border-box >> background-origin:border-box; 从border位置开始
3.content-box >> background-origin:content-box;从content位置开始

    
    
    



    
默认
    
padding
    
border
    
content

背景图片定位区域属性

三. 背景绘制区域属性

background-clip:xxx;背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景

    
    
    



    
默认
    
padding
    
border
    
content

背景绘制区域属性(红色为绘制区域)

四. 多重背景图片

先添加的背景图片会盖住后添加的背景图片

元素c3之后可以设置多张背景图片
多张背景图片之间用逗号隔开即可

background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom;

注意点:

先添加的背景图片会盖住后添加的背景图片

background: url("images/animal1.png") no-repeat left top,url("images/animal2.png") no-repeat right top,url("images/animal3.png") no-repeat left bottom,url("images/animal4.png") no-repeat right bottom,url("images/animal5.png") no-repeat center center;

建议在编写多重背景时拆开编写

background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: left top, right top, left bottom;

完整代码如下:

多重背景图片

四.多重背景图片联系

先添加的背景图片会盖住后添加的背景图片

蓝天白云