[分享]css中常见的背景样式属性

pre { background-color: #f2f2f2; padding: 10px; font-size: 14px; } p { font-size: 16px; line-height: 1.5; margin-bottom: 20px; }

在CSS中，不仅可以设置文本样式，还可以设置背景样式。下面是常见的背景属性：

background-color

这个属性设置元素的背景颜色。

 .box {
        background-color: #fff;
    } 

background-image

这个属性为元素设置背景图片。注意，<img> 标签本身也可以在HTML中设置图片，但是background-image 可以给元素添加复杂的背景效果。

 .box {
        background-image: url('background-image.png');
    } 

background-repeat

这个属性设置背景图片是否重复显示。

 .box1 {
        background-image: url('background-image.png');
        background-repeat: no-repeat; /* 不重复 */
    }
    .box2 {
        background-image: url('background-image.png');
        background-repeat: repeat-x; /* 水平方向重复 */
    }
    .box3 {
        background-image: url('background-image.png');
        background-repeat: repeat-y; /* 竖直方向重复 */
    } 

background-position

这个属性设置背景图片显示的位置。值可以用像素或百分比表示。

 .box {
        background-image: url('background-image.png');
        background-position: center; /* 居中显示 */
    } 

background-size

这个属性设置背景图片的大小，值可以用像素或百分比表示。

 .box {
        background-image: url('background-image.png');
        background-size: cover; /* 拉伸铺满元素 */
    }