背景尺寸属性
- CSS3中新增的一个属性, 专门用于设置背景图片大小
- 格式:
- background-size:宽度 高度;
- 取值:
- 具体像素
- 百分比
- 宽度等比拉伸(auto 100px)
- 高度等比拉伸(100px auto)
- cover(1.告诉系统图片需要等比拉伸2.告诉系统图片需要拉伸到宽度和高度都填满元素)
- contain(1.告诉系统图片需要等比拉伸2.告诉系统图片需要拉伸到宽度或者高度都填满元素)
背景图片定位区域属性
- 告诉系统背景图片从什么区域开始显示
- 格式:
- background-origin
- 取值:
- padding-box(默认情况下就是从内边距区域开始显示)
- border-box(从边框区域开始显示)
- content-box(从内容区域开始显示)
背景绘制区域属性
- 专门用于指定从哪个区域开始绘制背景的(背景颜色)
- 格式:
- background-clip
- 取值:
- padding-box(从内边距区域开始绘制背景)
- border-box(默认情况下会从边框区域开始绘制背景)
- content-box(从内容区域开始绘制背景)
多重背景图片
- 多张背景图片之间用逗号隔开即可
- 例如:
background-image:url("images/animal1.png"),url("images/animal2.png");
background-repeat: no-repeat, no-repeat;
background-position: left top, right top; - 注意:
- 先添加的背景图片会盖住后添加的背景图片
- 建议在编写多重背景时拆开编写
网友评论