CSS background属性

仅供学习，转载请注明出处

属性解释

background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动

实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。

下面手写例子来使用一下上面的参数

background-color 设置背景颜色

首先写一个div，设置一下背景颜色看看。

好了，看了使用背景颜色的示例。下面再来看看使用背景图片。

background-image 设置背景图片地址

设置一下第二个div的宽高，让背景图片显示好看一些。

那么能否设置背景图片不重复平铺呢？

background-repeat 设置背景图片如何重复平铺

设置background-repeat: no-repeat;则不会重复平铺。

如果需要平铺水平方向的内容呢？设置background-repeat: repeat-x;即可。

如果需要平铺垂直方向的内容呢？设置background-repeat: repeat-y;即可。

那么全部内容都要平铺呢？其实默认就可以了，设置background-repeat: repeat;

background-position 设置背景图片的位置

从图中可以看出，如果直接设置background-position: left;则是左边居中。

如果在后面加上top则会设置到左上角的位置。

从上面几个图可以看到，通过background-position: right top;这些语句，可以调整背景图片的位置。

还有另一种方式就是可以使用像素来进行位置偏移的设定，如下：

写完上来几个属性，如果每个都要单独写的话就比较费劲，下面介绍一下如何生成一行。

简写 background 属性示例

“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其他部分显示背景颜色“cyan”。

简写如下：

“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。

“background: cyan url(bg.png) no-repeat left top;”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”。

简化如下：

“background: cyan url(bg.png) no-repeat left center;”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。

“background: cyan url(bg.png) no-repeat right center;”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。

背景图截图例子说明：

background-position的设置，可以在水平方向设置“left”、“center”、“right”，在垂直方向设置“top”、“center”、“bottom”，除了设置这些方位词之外，还可以设置具体的数值。

比如说，我们想把下边的盒子用右边的图片作为背景，并且让背景显示图片中靠近底部的那朵花：

用上面中间那张图片作为左边那个比它尺寸小的盒子的背景，上面右边的实现效果设置为：“background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向下。

实现原理示意图：

对应代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            margin: 50px auto;

            background-color: cyan;
            background-image: url(location_bg.jpg);
            background-repeat: no-repeat;
            background-position: -107px -153px;

        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>