❤️接近两万字 CSS之熟练掌握background，这一次帮你彻底弄懂背景属性❤️（建议收藏）

作者:WangMin

格言:努力做好自己喜欢的每一件事

在项目中为了网页的美观，通常会给网页或者某个元素设置背景，这时就会用到 CSS中background属性 来实现这个效果，这个属性是一个很基本的而且比较常用的样式 ，那么应该怎样来运用这个属性呢？一起来看看吧！！！

background的属性的语法格式

background的属性可以通过以下的参数来实现背景效果：

background : background-color || background-image || background-repeat || background-attachment ||background-position|| background-size || background-origin||background-clip

上述background属性的写法其实是一种简写方式，将参数都写在background属性里面可以减少程序的读取时间和网页渲染速度。而且这些参数不是都要写上的，并且这些参数也可以单独作为属性来运用，这个就要看你的项目需求啦！那么这些参数分别表示什么？它们又有什么样的效果呢？

1、background-color

这个属性会给整个元素添加背景颜色，属性值可以表示颜色的英文，可以用RGB（可参考CSS3 rgb and rgba（透明色）的使用），可以用十六进制来表示颜色，另外 transparent 表示透明的背景色。例如：

<div class="box"></div>

.box{
    width:100px;
    height:100px;
    background: #33CCCC;
}

网页效果如下：



上述案例中用的是十六进制来表示的颜色，如果#后面的十六进制数是两位两位重叠的，可以将其简写的，效果是一样的，所以上述案例可以简写为：#3CC。如下图：

2、background-image

这个属性会给整个元素添加背景图片，属性值为 url(图片路径)，例如：

<div class="box"></div>

.box{
    width:170px;
    height:170px;
    background: url("img/image.jpg") ;
}

网页效果如下：



这里的图片路径推荐使用 相对路径，为什么要使用 相对路径而不是绝对路径呢？还要注意的一个问题是当单独在HTML文件中引入CSS文件时，需要注意图片路径的引用问题了。这两个问题是在项目中经常会遇到的，很重要，以后会给大家详细讲解到的。

这里的图片大小是和元素的大小是一样的，所以图片会把整个元素全部覆盖，那么如果图片大小与元素大小不一致的时候，那么这时可以用到下面的background-repeat来解决这个问题。

3、background-repeat

这个属性通常是和参数background-image搭配使用，是在水平和垂直方向上设置背景图片是否重复平铺，是什么意思呢？就是当图片的大小小于元素的大小时，是否将图片重复平铺直到将元素覆盖住。这个属性值有六个，分别是repeat、repeat-x、repeat-y、no-repeat、round、space 。下面来讲一下它们分别有什么效果。

1). repeat

完全平铺，复制图片把整个元素填满，将元素的水平和垂直方向都铺满，例如：

<div class="box"></div>

.box{
	width:300px;
	height:300px;
	border:1px solid #ccc;
	background: url("img/image.jpg") repeat ;
}

网页效果如下：

2). repeat-x

在水平方向图片复制并平铺，将元素水平方向铺满，例如：

<div class="box"></div>

.box{
	width:600px;
	height:300px;
	border:1px solid #ccc;
	background: url("img/image.jpg") repeat-x ;
}

网页效果如下：

3). repeat-y

在垂直方向图片复制并平铺，将元素垂直方向铺满，例如：

<div class="box"></div>

.box{
	width:600px;
	height:300px;
	border:1px solid #ccc;
	background: url("img/image.jpg") repeat-y ;
}

网页效果如下：



4). no-repeat

不平铺，只使用一张图片，通常在图片大小与元素大小一样的情况下使用，效果与在讲background-image所举的案例是一样的，只不过是在图片路径后面加了一个no-repeat，代码如下:

.box{
    width:170px;
    height:170px;
    border:1px solid #ccc;
    background: url("img/image.jpg") no-repeat ;
}

5). round

背景图向两端对齐重复，自动缩放背景图直到适应且填充满整个元素。例如：

<div class="box"></div>

.box{
	width:300px;
	height:300px;
	border:1px solid #ccc;
	background: url("img/image.jpg") round ;
}

网页效果如下：



这个属性值所呈现出的效果与背景图大小和元素大小有很大的关系。就拿在讲repeat时所举的案例来说，可以看到元素的水平方向的第二张背景图与垂直方向的第二张背景并没有显示完整，如果想要将两个方向的第二张图片显示完整的话，就需要根据元素大小将背景图整体进行缩放，使背景图可以平均铺满整个元素。如果你想要背景图完整重复铺满整个元素时，就可以使用round这个属性值，它可以根据元素大小自动将背景图整体进行缩放并且填充满整个元素。

6). space

表示背景图像以相同的间距平铺且填充满整个容器或某个方向，例如：

<div class="box"></div>

.box{
	width:600px;
	height:600px;
	border:1px solid #ccc;
	background: url("img/image.jpg") space ;
}

网页效果如下：

背景图之间的间距与元素的大小有关，它可以自动根据元素大小计算出它的水平方向与垂直方向背景图的最大个数，在设置好相应的间距。

4、background-attachment

用来设置背景图像是随元素内容滚动还是固定的，这个属性值有四个，分别是scroll、fixed、local、inherit。下面来讲一下它们分别有什么效果。

1). scroll

scroll是background-attachment的默认值，表示 背景图片跟随在元素（设置背景的元素）上，它是相对于元素固定，它会随着元素的滚动（元素的滚动会随着页面的滚动而滚动）而滚动，而不是随着它的内容滚动，所以元素内容滚动时背景图像不动。

例如：

<div class="box">
    <div class="inner">
        <p>1、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>2、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>3、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>4、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>5、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>
    </div>
</div>

body{
    height:2000px;
}
.box{
    width:700px;
    height:300px;
    border:1px solid #ccc;
    overflow:scroll;
    background: url("img/5.jpg") no-repeat scroll ;
}
.inner{
    width:700px;
    height:435px;
}

网页效果如下：

假如这个元素是一个可以滚动的元素，也就是说元素内部是具有滚动条并且设置了overflow：scroll / auto的话，这时候背景图片不会随着它的内容滚动，也就是说元素内容滚动时背景图像不动 ，例如：

<div class="box">
    <div class="inner">
        <p>1、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>2、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>3、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>4、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>5、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>
    </div>
</div>

.box{
    width:700px;
    height:300px;
    border:1px solid #ccc;
    overflow:scroll;
    background: url("img/5.jpg") no-repeat scroll ;
}
.inner{
    width:700px;
    height:435px;
}

未滚动之前网页效果如下：



滚动之后网页效果如下：

两张效果图的对比，拖动滚动条后，可以看到背景图的位置没有发生改变，而元素里面的内容位置发生了改变，也就是说元素内容的滚动不会影响元素背景的位置。

2). fixed

背景图像相对 页面可视区域的左上角固定 ，它只会固定在页面中的某一个位置 ，元素内容滚动时，图片不动，相当于背景被设置在了body上。例如：

<div class="inner">
        <p>1、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>2、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>3、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>4、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>5、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>
    </div>

body{
    background: url("img/5.jpg") no-repeat fixed;
    height:2000px;
}
.inner{
    width:700px;
    height:435px;
}

未滚动之前网页效果如下：

滚动之后网页效果如下：

从上述例子中可以看到不管滚动条如何滚动，背景的位置始终固定在页面可视区域的左上角没有任何改变。如果你想要被整个网页设置一个背景，并且希望它随着网页的滚动而改变位置的话，就可以使用这个属性值。

3). local

这是CSS3新增的属性值。背景图像相对元素内容固定，跟随元素的内容一起滚动。对于一个可以滚动的元素（设置为overflow:scroll / auto的元素），设置background-attachment:local，则背景会随内容的滚动而滚动。例如：

<div class="box">
    <div class="inner">
        <p>1、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>2、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>3、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>4、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>

        <p>5、fixed 背景图像相对窗体固定，即内容滚动时，图片不动;
            scroll 相对元素固定，背景图像跟随元素本身，元素内容滚动时背景图像不动;
            local 相对元素内容固定，背景图像跟随元素内容。</p>
    </div>
</div>

.box{
   width:700px;
   height:300px;
   border:1px solid #ccc;
   overflow: auto;
   background: url("img/5.jpg") no-repeat local;
}
.inner{
   width:700px;
   height:435px;
}

未滚动之前网页效果如下：

滚动之后网页效果如下：



从上述案例中可以看出元素背景图的位置随着元素内容的滚动在发生改变。

4). inherit

inherit属性值取决于父元素background-attachment 属性的设置。

对以上属性值进行总结：

• scroll和local的区别：scroll背景相对于元素固定，而local背景相对于元素内容固定。也就是说，在存在内部滚动条的情况下，scroll就相当于fixed，而local就相当于scroll。
• fixed与scroll的区别：scroll背景相对于元素固定，而元素会随着页面的滚动条移动，而fixed背景相对于页面可视区域的左上角固定，不管页面滚动条怎么滚动，背景图的位置都不会发生改变，它只会固定在页面中的某一个位置。

5、background-position

设置背景图像所在位置的属性。这个属性值有3种表示方法，分别是方位表示法、百分比表示法、像素表示法，每个方法对应着两个值。下面来讲一下它们分别是什么值，有什么样的效果。

1). 方位表示法

上面提到了每个方法有两个值，那么这个方法所对应的两个值如下表：

方位	背景图所在位置
top left	表示背景图在元素左上方 的位置
top right	表示背景图在元素右上方的位置
top center	表示背景图在元素上方居中的位置
bottom left	表示背景图在元素左下方的位置
bottom right	表示背景图在元素右上方的位置
bottom center	表示背景图在元素底部居中的位置
center left	表示背景图在元素左边居中的位置
center right	表示背景图在元素右边居中 的位置
center center	表示背景图在元素垂直居中的位置

这里举两个例子来说明一下，将背景设置在元素的垂直居中的位置，如下：

<div class="box"></div>

.box{
   width:220px;
   height:220px;
   border:1px solid #ccc;
   background: url("img/image.jpg") no-repeat center left;
}

网页效果如下：



将背景设置在元素左上方的位置，如下：

<div class="box"></div>

.box{
   width:220px;
   height:220px;
   border:1px solid #ccc;
   background: url("img/image.jpg") no-repeat top left;
}

网页效果如下：



方位表中的值就不一一列举了，可以根据项目的需求在来选择方位表中的值。

注意：如果只规定了第一个值，那么第二个值将会自动设置为"center"。

2). 百分比表示法

用百分比来表示两个值，第一个值是水平位置，第二个值是垂直位置。它是相对于元素的大小来计算的。左上角是 0% 0%。右下角是 100% 100%。例如：

<div class="box"></div>

.box{
   width:220px;
   height:220px;
   border:1px solid #ccc;
   background: url("img/image.jpg") no-repeat 20% 20%;
}

网页效果如下：



注意：如果只规定了第一个值，那么第二个值将会自动设置为 50%。

3). 单位表示法

这里的单位表示法通常使用像素单位，用像素来表示两个值，第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。当然单位表示法也可以用任何其他的 CSS 单位。可以将背景图片定位到元素中的任意位置，例如：

<div class="box"></div>

.box{
   width:220px;
   height:220px;
   border:1px solid #ccc;
   background: url("img/image.jpg") no-repeat 40px 20px;
}

网页效果如下：



这里将背景图片定位到了距离元素左边40px，顶部20px的位置。

注意：如果只规定了第一个值，那么第二个值将会自动设置为 50%，

并且单位表示法可以与百分比表示法混合使用。

6、background-size

设置背景图像的尺寸大小。这个属性值有四种表示方法，分别为单位表示法length、百分比表示法percentage、属性值cover、属性值contain，下面来讲一下它们分别是什么值，有什么样的效果。

1). 单位表示法length

这种方法需要用两个值来表示，第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。例如：

<div class="box"></div>

.box{
   width:220px;
   height:220px;
   border:1px solid #ccc;
   background: url("img/image.jpg") no-repeat 40px 20px/100px 100px;
}

网页效果如下：



这里只给元素设置了宽100px，高100px大小的背景图。注意这里背景的位置与大小的写法，下面注意事项中有提到。

2). 百分比表示法percentage

相对于父元素的百分比来设置背景图像的宽度和高度，这种方法也需要用两个值来表示。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。例如：

<div class="box"></div>

.box{
   width:220px;
   height:220px;
   border:1px solid #ccc;
   background: url("img/image.jpg") no-repeat 40px 20px/50% 50%;
}

网页效果如下：



3). cover

按比例调整背景图片并且自适应铺满整个背景区域，也就是说背景要覆盖元素的所有区域，不能有空白出现，这里只需要cover这一个属性值。例如：

<div class="box"></div>

.box{
   width:220px;
   height:220px;
   border:1px solid #ccc;
   background: url("img/image.jpg") no-repeat top left/cover;
}

在不设置cover的情况下背景图的大小，网页效果如下：

在设置了cover的情况下背景图的大小将整个元素全部覆盖住了，网页效果如下：



假如背景区域不足以包含背景图片的话，那么背景图片就会被截掉，也就是背景图片的大小大与了元素的大小，图片多余的部分会被裁掉，例如：

<div class="box"></div>

.box{
    width:200px;
    height:150px;
    border:1px solid #ccc;
    background: url("img/girl.jpg") no-repeat top left/cover;
}

网页效果如下：



这里背景图片的宽度为927px，高度为1158px，远远大于元素的大小，这里按比例调整背景图片使它能够自适应元素大小并且将元素完整覆盖住，不留一点空白区域，调整过后的背景图片的高度依旧大于了元素的高度，所以被截掉了，导致背景图片没有完整显示出来。

4). contain

按比例调整背景图，使得背景图片宽高比自适应整个元素的背景区域的宽高比。假如背景图尺寸过大，而元素的整体宽高不能刚好显示出背景图的话，那么其元素某些区域可能会有空白，例如：

<div class="box"></div>

.box{
    width:200px;
    height:150px;
    border:1px solid #ccc;
    background: url("img/girl.jpg") no-repeat top left/contain;
}

网页效果如下：



这里的背景图的大小依旧是宽度为927px，高度为1158px，远远大于元素的大小，这里按比例调整背景图片使它能够完整的包含在元素中，当自适应过后的背景图的某一尺寸小于了元素相对应的尺寸，元素内部会出现留白空间。这里背景图片自适应过后的宽度小于了元素的宽度，导致了元素水平方向的留白。

7、background-origin

该属性指定了背景在哪些区域开始绘制，设置的是开始绘制的位置，有三个属性值，分别是border-box、padding-box、content-box。通常与background-clip搭配使用。

1). border-box

背景在边框区域开始绘制，例如：

<div class="box">
   边框区域border-box边框区域border-box
</div>

.box{
    width:200px;
    height:150px;
    color: #fff;
    border:10px dashed #ccc;
    background: url("img/girl.jpg")  0 0/cover border-box;
}

网页效果如下：

2). padding-box 默认值

背景在内边距框区域开始绘制，例如：

<div class="box">
    内边距区域padding-box内边距区域padding-box
</div>

.box{
    width:200px;
    height:150px;
    color: #fff;
    padding:25px;
    border:10px dashed #ccc;
    background: url("img/girl.jpg")  0 0/cover padding-box;
}

网页效果如下：

3). content-box

背景在内容框区域开始绘制，如果存在内边距，则不计算到内容框区域中，也就是内容框区域不包括内边距，例如：

<div class="box">
    内容区域content-box内容区域content-box
</div>

.box{
    width:200px;
    height:150px;
    color: #fff;
    padding:25px;
    border:10px dashed #ccc;
    background: url("img/girl.jpg")  0 0/cover content-box;
}

网页效果如下：

8、background-clip

该属性表示的是根据区域裁剪出想要的背景图片，有三个属性值，分别是border-box、padding-box、content-box。通常与background-origin搭配使用。

1). border-box

背景在边框区域开始裁剪，但是如果background-origin也设置为border-box的话，则裁剪的是整张背景图，效果跟但设置background-origin为border-box是一样的效果，这里就不举例了。

2). padding-box

背景在内边距框区域开始裁剪。

在background-origin设置为border-box的，background-clip设置为padding-box的情况下，裁剪的背景图片区域如下：

<div class="box">
    背景在内边距框区域开始裁剪
</div>

.box{
    width:200px;
    height:150px;
    color: #fff;
    padding:25px;
    border:10px dashed #ccc;
    background: url("img/girl.jpg")  0 0/cover border-box padding-box;
}

未设置background-clip为padding-box之前，网页效果如下：

设置了background-clip为padding-box之后，网页效果如下：

从两张图的对比中可以看出，背景图片的位置并没有发生改变，只是从内边距框区域开始裁剪图片，也就是说只显示内边距框区域中的背景图。

3). content-box

背景在内容框区域开始裁剪。

在background-origin设置为border-box的，background-clip设置为content-box的情况下，裁剪的背景图片区域如下：

<div class="box">
    背景在内容框区域开始裁剪。
</div>

.box{
    width:200px;
    height:150px;
    color: #fff;
    padding:25px;
    border:10px dashed #ccc;
    background: url("img/girl.jpg")  0 0/cover border-box content-box;
}

网页效果如下：



上述案例总背景图片的位置并没有发生改变，只是从内容框区域开始裁剪图片，也就是说只显示内容框区域中的背景图。

background的属性运用的注意事项

1、如果同时设置了 background-position 和 background-size 两个属性，应该用左斜杠/，而不是用空格把两个参数值隔开： background-position / background-size。

2、 当 background-size 设置为 cover 和 contain 时， background-rapeat 的 space属性值与round 属性值都会失效。并且部分Firefox版本不支持space属性值与round 属性值。

3、background-repeat属性可以提供 2 个参数，也可以提供1个参数。如果提供 2 个参数，第一个用于水平方向，第二个用于垂直方向；如果只提供 1 个参数，则同时用于水平方向和垂直方向。

4、如果同时使用 background-origin 和 background-clip 属性,background-origin属性值需在background-clip属性值前面, 如果两者的属性值相同, 则可以只设置一个值。

5、建议顺序如下: background-color || background-image || background-repeat || background-position / background-size || background-attachment || background-origin || background-clip。

6、可以给元素设置多张背景，背景属性之间使用逗号 , 隔开。例如：

<div class="box"></div>

.box{
    width:510px;
    height:350px;
    color: #fff;
    border:10px dashed #ccc;
    background: url("img/image.jpg") no-repeat 0px 0px/170px 170px,
                url("img/image.jpg") no-repeat 170px 170px/170px 170px,
                url("img/image.jpg") no-repeat 340px 0/170px 170px
     ;
}

网页效果如下：

---

以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! 后续继续更新!!