CSS样式
css背景(background)
CSS 可以添加背景颜色和背景图片， 以及来进行图片设置。
| 属性 | |
|---|---|
| background-color | 背景颜色 |
| background-image | 背景图片地址 |
| background-repeat | 是否平铺 |
| background-postion | 背景位置 |
| background-attachment | 背景固定还是滚动 |
背景图片(image)
语法:
background-image: none|url(图片地址)
参数:
- none : 无背景图（默认的）
- url : 使用绝对或相对地址指定背景图像
/* 示列 */
body {background-image: url(/i/eg_bg_04.gif);}
- url()中的图片地址可以不加引号
- 可以和 background-color连起来使用, 图片没有覆盖的位置会使用color来填充
背景平铺(repeat)
语法:
background-repeat : repeat | no-repeat | repeat-x | repeat-y
- repeat : 背景图像在纵向和横向上平铺（默认）
- no-repeat : 背景图像不平铺
- repeat-x : 背景图像在横向上平铺
- repeat-y : 背景图像在纵向平铺
/*示列*/
body {
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
背景位置(position)
语法:
/* 使用百分比或者具体长度值指定图像位置 */
background-position : length || length
/* 或者使用方位名词来指定图像位置 */
background-position : position || position
参数:
- length : 百分数 | 由浮点数字和单位标识符组成的长度值
- position : top | center | bottom | left | center | right
/*示列*/
body {
background-image: url(/i/eg_bg_03.gif);
background-position: 15px top;
}
背景附着(attachment)
语法:
background-attachment : scroll | fixed
参数:
- scroll : 背景图像是随对象内容滚动(默认)
- fixed : 背景图像固定
/*示列*/
body {
background-image: url(/i/eg_bg_03.gif);
background-position: 15px top;
background-attachment : fixed;
}
背景简写
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
/*示列*/
body {
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
}
CSS3中颜色值可以使用 background: rgba(0,0,0,0.2);
