如何让你的页面背景更加酷炫，需要这样做！

background简写属性在一个声明中设置所有的背景属性。

今天我们继续扯一下div+css。不过我们今天的重点是background（背景属性）！那么background有着哪些的属性与作用呢？咱们通过一些例子来说明下。

background-color

首先我们来试试看background-color:#666;会有什么样的效果。

可以看出我们的代码的意思是我们的“盒子”范围内的背景已经变成了#666（rgb：102,102,102）的颜色。

background-image:none/url

其次呢，我们可以来尝试下把背景由颜色转换成图片。

none：该属性值是默认属性，为无背景图片。

url：该属性定义了所需要使用的背景图片地址，图片地址可以是相对路径，也可以是绝对路径。

我们先来试试background-image:url（图片的地址）；

从上面的效果图可以看出，我们的背景本来是一张波浪的图片，但是我们没有输入其他的控制代码，所以背景图像在默认情况下会以平铺的形式重复显示。那么我们如何来解决呢？

background-repeat

然后呢，我们通过这个代码可是设置背景图像的重复性。它有着repeat、no-repeat、repeat-x和repeat-y这些基本属性。

repeat：该属性值设置背景图片在水平和垂直方向上重复平铺。（background-repeat:repeat;）

no-repeat：该属性值设置背景图像不重复平铺。（background-repeat:no-repeat;）

repeat-x：该属性值设置背景图像在水平方向上重复平铺。（background-repeat:repeat-x;）

repeat-y：该属性值设置背景图像在垂直方向上重复平铺。（background-repeat:repeat-y;）

background-position

如果说上面的代码还是无法解决让你的背景图在其他位置显示的问题，那么这个代码就厉害咯！它能控制你的背景图显示在你想让它出现的地方。

咱们就来说一个直接了当的办法：x% y%（第一个是水平位置，第二个是垂直位置）如果规定了一个，另一个默认是50%。

咱们可是设置看看（30% 40%）试试是什么效果。（这里不要忘记设置图片不能重复哦）

到最后你觉得找百分比觉得不是很方面的话。那么咱们来讲个更直接的：xpx ypx（第一个是水平位置，第二个是垂直位置，单位是像素或者其他的css单位）如果规定了一个，另一个默认是50%。

同样，咱们可以设置下（450px 150px）试试是什么效果。（这里不要忘记设置图片不能重复哦）

我想这样就能够帮你控制背景图片到任何一个地方了吧！

这一期呢，小编先分享到这里。如果你想get到其他的高端操作，欢迎关注浙江经贸电商公众号。我们在后期慢慢分享！

ღ The End ღ

我们一起传播正能量

编 辑 | 唐佐明

审 核 | 曹春益