background

background

常用的背景图片格式：

• jpg 不支持动画，不支持透明，渐进显示，颜色丰富，有损
• png 不支持动画，支持透明度，颜色更丰富，无损
• gif 支持动画，256种颜色，2种透明度，渐进显示
• webp 支持动画，高压缩率，高加载速率（网页图片格式）

background-image:url(图片地址);

​

background-repeat

背景图平铺跟拉伸

背景图太小会平铺复制整个页面

X轴水平横向，Y轴水平横向

如果采取默认的背景图片平铺，则背景图片则会延伸到边框之下，如果不重复，则图片不会延伸至边框之下

background-repeat: no-repeat;(不重复显示)
background-repeat: repeat-y;
background-repeat：repeat;（默认重复显示）

两侧固定导航栏，不设宽度，自适应图片
.nav ul li a{
    background: url("images/left01.png") no-repeat;
    padding-left: 10px;
}
.nav ul li span{
   background: url("images/right01.png") repeat-x  top;
   padding-right: 30px;
}

background-size

背景图设置大小

可以px，可以百分比，auto代表等比例缩放

cover覆盖整个区域

contain平铺一侧边框后停止

background-size:20px auto(宽20px 高等比例缩放)

background-origin

显示器默认背景图片显示基点是 padding

不常用，另一侧的边框跟内边区都会显示

background-origin:padding-box;		系统默认就是从内边去开始
background-origin: content-box;		基点从内容区左上角开始
background-orihin:  border-box;		基点从边框区左上角开始

background-clip

裁剪显示

从基点设置图片显示，跟裁剪需要配合好

要不然组合使用，图片效果有大有小

background-clip: padding-box;
background-clip:content;
background-clip:border;

背景图片关联依附

决定背景是在视口中固定显示，还是随包含它的区块滚动的

fixed——表示背景图相对于视口固定，即使一个元素拥有滚动机制，背景图也不会随着元素的内容滚动（图片显示在初始标签的位置，移到标签到别的区域，将不会显示）

local——表示背景图固定在内容上，滚动内容会被带走

scroll——表示背景图相对于元素标签本身，会一直显示，不受影响

background-attachment:csrll;

background-position

背景图片位置定位

background-position:20px 100px;		常规写法
top			——顶点位置		top left ——左上角
bottom 	——底点位置		top right——右上角
left			——左边位置		bottom left——左下角
right		 ——右边位置		bottom right——右下角
background-position: center; 		背景图居中
0px 0px		就是图片起始位置
20px  		高不设置就是自动居中

background复合写法

背景：颜色 路径 是否平铺 关联依附 位置 / 尺寸

background: red url() no-repeat attachment position/size

省略部分会被默认值替代

样式顺序不能错

• 当多个背景图片一起显示，颜色需要写在最后一个，多重需要用“ ，”分隔
• 当两个图片位置相同，设置的第一张图会覆盖后面的（前覆盖后）
• 多个背景图片，中背景颜色一定要写在最后，red

background:（写一个）
	red url()  no-repeat scroll 20px 20px/30px 30px；
background:（写多个）
	url()  no-repeat scroll 20px 20px/30px 30px（auto等比例缩放）,
	url()  no-repeat scroll 20px 20px/30px 30px red;

背景图背面隐藏

backface-visibility: hidden;隐藏被旋转的 div 元素的背面