前端工程师实战17：详解CSS背景图片、雪碧图

大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！按知识点循序渐进，按照顺序读下来绝对比搜索网上教程更加紧凑！内容通俗易懂，图文并茂，欢迎订阅！

 

background-imgae:url("[图片路径]")

background-color:#bfa

可以同时设置，会使背景颜色设置为图片的背景色

如果背景图片小于元素，则会平铺，如果图片大于元素，将会有一部分背景无法完全显示。

如果背景图片和元素一样大，就正常显示。

background-repeat:设置背景重复方式，可选值：

1. repeat:默认值，图片平铺

2. repeat-x:沿着x轴平铺

3. repeat-y:沿着y轴平铺

4. no-repeat:不平铺

background-position设置背景图片的位置，可选值：top,left,bottom,center表示图片的位置，也可以组合，比如 top left就是左上角 bottom left 就是底部中间，只设置一个值，另一个值就是center。

还可以通过偏移量来指定背景图片的位置。

background-position:100px 300px第一个是水平方向，第二个是垂直方向，正值图片往右/下走。（注意这个属性，下面将会用来设置雪碧图）

设置背景范围

背景是会存在在边框里面的，如果我们将边框样式设置为border-style:double就可以看到边框下面也有背景的颜色。

background-clip:设置背景范围

可选值：

1. border-box:默认值，背景会出现再边框得下边

2. padding-box:背景不会出现再边框，只出现在内容区和内边距