背景颜色background-color
- 英文名称
- rgb表示法,红绿蓝值从0~255取值,rgb(0,0,0)黑色,rgb(255,255,255)白色
- 十六进制表示法
背景图片background-img
background-image: url("./img/banabana.jpg");
- url设置资源链接
设置图片平铺显示方式,padding区域也将平铺
background-repeat: repeat;
- repeat:默认属性,平铺显示
- no-repeat:不平铺显示,显示一张
- repeat-x:水平方向平铺
- repeat-y:垂直方向平铺
background-postion
调整图片位置属性
background-position: 0 0;
第一个表示水平移动距离,第二个数字表示垂直方向移动的距离。
可以设置负数,表示向左和向上移动指定距离
css雪碧图: 通过设置postion属性来显示指定内容
postion除了设置数字外,还有以下值可设置
水平方向:left,right,center
垂直方向:top center bottom
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
body{ /*属性方法设置*/ /*background-image: url(./img/banner.jpg);*/ /*background-repeat: no-repeat;*/ /*!*水平居中通天banner图*!*/ /*background-position: center top;*/ /*综合属性写法*/ background:red url(./img/banner.jpg) no-repeat center top; }
background-attachent属性
- fixed:固定位置,浏览器滚动时图片位置不动