前端:background-image属性知多少?

事情发生在两天前的一个下午。。。

小编正在电脑前浏览网页，不知何时领导突然杀了出来，直冲到小编身旁呵斥道：“最近我看了公司的网站，很不好！现在天冷了，不知道换个暖色的背景吗！！！“好吧，领导说啥咱就做啥，开始动工吧。

打开公司网站，目前背景是黑色的，窄屏布局。

F12一下，懂得人不用多说吧。找到body标签的background-color背景属性。

对于色彩不感冒的小编，从网上搜了一下暖色的色值

前两个看着还不错，那就试试吧。

还是算了吧，太low，找个图片吧。

既然是一图片做背景，我们需要把background-color改为background-image，格式是：url（图片的路径）

瞬间好多了

可能细心的同学已经发现了

在我们设置background-image属性时，虽然我们没有添加background-repeat属性，但他的默认值就会把图片设为平铺（background-repeat: repeat），这样的话很影响美观，用户在浏览我们的网站时，会显得很杂乱，而且，如果你的站含有优化的话，会直接导入跳出率增高。

这就涉及到了repeat的属性。repeat：完全平铺，即水平和垂直。

repeat 的属性有以下4个：

repeat 即默认方式，完全平铺背景；

no-repeat 在X及Y轴方向均不平铺；

repeat-x 横向平铺背景；

repeat-y 纵向平铺背景。

了解了它的属性，我们就给它设置个值，

看一下效果，果然不平铺了，但新的问题又来了：超出图片的宽度后下方是空白，没有任何填充。

接下来我们要让这个图片固定不动，即不随浏览器滑块的拖动而滚动。

background-attachment

该属性用来定义背景图片是否随浏览器滑块的拖动而滚动，在背景图片滚动属性中，可以使用两个属性值，分别为scroll和fixed，

background-attachment: scroll | fixed;

*scroll: 背景图片随滑块的变化而滚动。

*fixed: 背景图片固定不动。

关于网页的背景图片，还有其他属性，如：大小、位置，渐变等。本文写的还不算全面，欢迎大家交流补充，谢谢。