3.1.background-color

background-color: 设置对象的背景颜色。

· 属性值

transparent：默认值(背景色透明)。

{ color} ：指定颜色。

· 示例

div {
     background-color: #666666;
 }
div {
     background-color: red;
 }

3.2 background-image

background-image: 设置对象的背景图像。

· 属性值

none：默认值(无背景图)。

url({ url} )：使用绝对或相对 url 地址指定背景图像。

· 示例

div {
     background-image: none;
 }
div {
 background-image: url('../images/pic.png') }

3.3 background-repeat

background-repeat: 设置对象的背景图像铺排方式。

· 属性值

repeat：默认值(背景图像在纵向和横向平铺)。

no-repeat：背景图像不平铺。

repeat-x ：背景图像仅在横向平铺。

repeat-y：背景图像仅在纵向平铺。

· 示例

div {
    background-image: url('../images/pic.png');
     background-repeat: repeat-y;
}

3.4 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;
}

3.5 background-attachment

background-attachment: 设置对象的背景图像滚动位置。

· 属性值

· scroll：默认值。背景图像会随着页面其余部分的滚动而移动。

· fixed: 当页面的其余部分滚动时，背景图像不会移动。

· 示例

body {
     background-image: url('../images/pic.png');
     background-repeat: no-repeat;
     background-attachment: fixed;
}

3.6 background

background 简写属性：在一个声明中设置所有的背景属性。

· 语法

background: color image repeat attachment position

· 示例

body {
 background: #fff url('../images/pic.png') no-repeat fixed center center }
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！