CSS-背景

2018-09-09  本文已影响0人  哎呦呦胖子斌

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. 产品展示之类的就用插入图片

上一篇 下一篇

猜你喜欢

热点阅读