css之background

253 阅读1分钟

1.background-color

用法:background-color:#EEE

2.background-image

用法:background-image:url( );
盒子容器宽高大于图片宽高,图片会平铺,直到撑满整个盒子; 盒子容器宽高小于图片宽高,图片会自动裁剪,只显示一部分内容;

3.background-size

css3中新增的属性,可以规定图片尺寸 用法:background-size:宽高/百分比/cover/contain
background-size:100px 200px;(设置背景图宽高)
background-size:cover;(放大 填满整个盒子 超出部分裁剪 )
background-size:contain(放大到宽高刚好合适 然后平铺图片)

4.background-repeat

图片是否平铺 用法: background-repeat :no-reapet(不平铺 最常用)

5.background-position

水平:left center right
垂直:top center bottom
还可以设置具体的像素或者百分比 x y

6.background-attachmen

设置图片是否随页面滚动 默认值是scroll(滚动) 设置fixed(不滚动)

不常用的两种

7.background-origin
8.background-clip