day23-CSS-背景相关属性
2017-06-22 本文已影响16人
喵鸢
背景尺寸属性
- CSS3中新增属性,专门用于设置背景图片大小
- 取值background-size:x轴 y轴
- 默认
- 具体像素
- 百分比
- 宽度等比拉伸---谁auto设置谁等比例拉伸,保证不变形
- 高度等比拉伸---谁auto设置谁等比例拉伸,保证不变形
- cover
- 图片需要等比拉伸
- 高度和宽度都填满整个网页
- contain
- 图片需要等比拉伸
- 高度或宽度满足时则不拉伸了
背景图片定位区域属性
- background-origin--告诉系统背景图片从哪个区域开始显示
- 默认是从padding处开始显示
- padding-box
- border-box
- content-box
背景绘制区域属性
- background-clip--告诉系统背景从哪个区域开始绘制的
- 默认背景颜色是从boder处开始绘制
- padding-box
- border-box
- content-box
CSS3多重背景图片
- 多张背景图片之间用逗号隔开
- 先添加背景图片的会覆盖着后添加的背景图片
- 可以用定位top left等进行定位
- 注意点:
- 多重背景图片不利于阅读,建议拆开来写
- background-image:图片1,图片2,
- background-repeat:图片1no-repeat,图片2no-repeat
- background-position:left top,right top,