1、回顾css2 背景属性
background-color,
backgorund-image,
background-position,
background-repeat
2、背景尺寸
background-size: 宽 高;
500px 500px
50% 50% 百分比是相对于盒子自身的宽高的
cover:覆盖 保证背景图片会等比例完全铺满盒子,不保证可以完整显示图片
contain:包含 保证背景图片等比例最大化的 在盒子中完整是显示,不保证铺满盒子
3、背景原点
background-origin: 用于指定背景图片从那个盒子开始平铺
padding-box: 默认值
border-box
content-box
4、背景裁剪
background-clip: 指定背景图片从那个盒子开始裁剪
border-box (默认值)
content-box
padding-box
4、多背景
多背景: 每个背景按照 正常的语法格式书写,多个背景之间使用逗号隔开
背景层级:先写的背景层级高,后写的层级低,通过过控制背景的属性先后顺序来控制层级;
background:
url(images/bg1.png) no-repeat left top,
url(images/bg2.png) no-repeat right top,
url(images/bg3.png) no-repeat right bottom,
url(images/bg4.png) no-repeat left bottom,
url(images/baby0.jpg) no-repeat center center,
url(images/bg5.png) no-repeat center center;
网友评论