一、背景基础属性
1 背景颜色
background-color
2 背景图片设置
background-image:url(背景图片的路径及全称);
3 背景图片平铺属性
background-repeat: no-repeat / repeat / repeat-x / repeat-y
4 背景图的固定
background-attachment 属性值scroll(滚动)、fixed(固定)
5 背景图片的位置
background-position
一个值 代表水平位置和垂直位置,center或数值
两个值 水平位置(左右)、垂直位置(上下)
6 背景缩写
background:#f00 url(背景图片的路径及全称) no-repeat center top;
二、背景进阶属性
1 background-origin背景原点
border-box 背景图像边框的相对位置
content-box 背景图像从内容的位置开始显示
padding-box(默认值) 从padding的区域开始显示
2 background-clip 背景裁切
border-box(默认值)
padding-box 裁剪padding之外的背景图
content-box 裁剪content之外的背景图
3 background-size 背景尺寸
一个值 100px 宽度100px,高度按照自身比例缩放
两个值 100px 100px; 宽高
一个值 100% 宽度是元素的100%,高度按照自己的比例进行缩放
两个值 100% 60%; 宽高占父元素边框百分比
属性值 cover 以最短的那条边为基准(拉伸)铺满元素
contain 比较长的边为准,较长的边的长度拉伸为元素的宽或高
4 CSS3多背景属性(background)
background:url(demo.png) no-repeat;/* 写给不识别下面这句的默认背景图片 */ background:url(demo.png) no-repeat,url(demo1.png) left bottom; background-color:yellow;/* 这是定义的默认背景颜色,全部合适
注意:多背景以逗号分隔开,且前面的背景会覆盖后面的背景