background-color 背景颜色
background-image:url() 背景图片
background-repeat 平铺
repeat-x向上平铺
repeat-y向下平铺
repeat 横向和纵向平铺
no-repeat不平铺
round(CSS3)背景图像自动缩放直到适应且填充整个容器
space(CSS3)背景图像以相同的间隔平铺且填充整个容器或某个方向
background-position 三种写法:
1. top center bottom left right当有两个参数时,表示水平位置和垂直位置,如果方位名词只写一个,那么另外一个默认为center;
2. 写具体的像素值,第一个值为x偏移,第二个值为y偏移
3. 也可以将两个方式混合起来使用
background-attachment
scroll 背景图片随内容一起滚走的
fiexd 背景固定
背景透明(CSS3)
background:rgba(r,g,b,a) 最后一个参数在0-1之间
背景缩放(CSS3)
background-size:
1. 宽度 高度;(具体数值或者是百分比都可以)
如果只写一个参数,表示只改了宽度,高度等比例缩放
2.cover,会自动调整缩放比例,保证土图片始终填充满整个背景区域,溢出部分会被隐藏
3.contain,会自动调整缩放比例,保证图片始终完成显示在背景区域,在缩放过程中,如果有宽度或者高度有一个和盒子一样大,就不再缩放,保证了图片的完整。
多背景图片
background-image:url(),url(),url();
如果设置的多重背景图之间存在着交集,即存在层叠关系,前面的背景图会覆盖在后面的背景图之上。
为了避免背景色将图像盖住,背景色通常都设置在最后一个背景图上。
什么时候用背景图片、什么时候用插入图片:
1. 一般情况下,背景图片适合做一些小图标
2. 产品展示之类的就用插入图片
网友评论