CSS Backgrounds and Borders - CSS(层叠样式表) | MDN (opens new window)
# background-color
background-color : 设置对象的背景颜色。
属性值
- transparent :默认值(背景色透明)。
- {color} :指定颜色。
div { background-color: #666666; }
div { background-color: red; }
# background-image
background-image : 设置对象的背景图像。
属性值
- none :默认值(无背景图)。
- url({url}) :使用绝对或相对 url 地址指定背景图像。
div { background-image: none; }
div { background-image: url('../images/pic.png') }
# background-repeat
background-repeat : 设置对象的背景图像铺排方式。
属性值
- repeat :默认值(背景图像在纵向和横向平铺)。
- no-repeat :背景图像不平铺。
- repeat-x :背景图像仅在横向平铺。
- repeat-y :背景图像仅在纵向平铺。
div {background-image: url('../images/pic.png'); background-repeat: repeat-y;}
# background-position
background-position : 设置对象的背景图像位置。
属性值
{x-number | top | center | bottom } {y-number | left | center | right }
控制背景图片在元素的位置:x轴 、y轴。其铺排方式为no-repeat。
div {
background-image: url('../images/pic.png');
background-repeat: no-repeat;
background-position: 50px 50px;
}
# background-attachment
background-attachment : 设置对象的背景图像滚动位置。
属性值
- scroll :默认值。背景图像会随着页面其余部分的滚动而移动。
- fixed : 当页面的其余部分滚动时,背景图像不会移动。
body {
background-image: url('../images/pic.png');
background-repeat: no-repeat;
background-attachment: fixed;`
}
# background
background 简写属性:在一个声明中设置所有的背景属性。
语法
background: color image repeat attachment position
body { background: #fff url('../images/pic.png') no-repeat fixed center center }