css背景设置
1、 背景颜色
- background-color:后面跟颜色属性
2、 背景图片
- background-image
属性允许指定一个图片展示在背景中(只有CSS3才可以多背景)可以和 background-color 连用。 如果图片不重复的话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。 - 参数
- none:无背景(默认)
- url:使用绝对或相对地址指定背景图像
3、 背景平铺
- 即所选背景图片是否填充整个样式区域
- 语法
background-repeat : repeat | no-repeat | repeat-x | repeat-y
- 参数
- repeat : 背景图像在纵向和横向上平铺(默认的)
- no-repeat : 背景图像不平铺
- repeat-x/y : 背景图像在横向/纵向上平铺
4、 背景位置
- 调整背景图片在区域内的样式
- 语法
background-position : x坐标 y坐标
- 参数
- 使用top bottom left right center定位,没有顺序
background-position: top left; // 左上角 background-position: top; //只写一个默认另一边居中
- 直接写像素
background-position: 12px 30px // x,y轴顺序
- 使用top bottom left right center定位,没有顺序
5、 背景附着
- 设置背景是随内容滚动还是固定
- background-attachment
- 参数
- scroll:滚动
- fixed:固定
以上背景可以简写,类似padding或margn属性一样,按照顺序即可
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
6、背景透明(CSS3)
- CSS3支持背景半透明的写法语法格式是:
- background: rgba(0,0,0,0.3);
最后一个参数是alpha 透明度 取值范围 0~1之间
注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不收影响。
- background: rgba(0,0,0,0.3);