Css3之background-image的深层次理解

我们大家都知道，background-image这个属性是用来设置背景图片的，一般的写法是background-image:url()。这种写法也是最常用最普遍的方法，可以直接调用图片地址，简单又快捷。但是人力有时穷，何况区区一个属性?下边，我再给大家介绍几种background-image属性的设置方法，希望能帮助大家加深对这个属性的理解。

第一种方法：用background-image:url()

这种方法是大家最常用的方法，大部分都会用，我也就不再多家赘述。直接上干货。

第二种方法：用base64编码，直接设置背景图像

这种方法的写法是：bakeground-image:url(base64)。这种方法是直接把图片转化成base64编码镶嵌到网页中，用这种方法设置的背景图片，可以减少一个http请求，积少成多，有利于前端优化。但是这种方法也有自己的缺点，base64编码太过冗长，不适用于将太大的图片转换成base64编码。那么该如何将图片转化成base64编码呢?这就需要用到编码转化工具了。大家可以自己到脚本之家在线工具页面去寻找，

第三种方法：用渐变颜色作为背景图像

在我们的潜意识里，往往会将渐变颜色误认成是颜色的一种。其实不然，渐变颜色在处理时，是被当成图片处理的。也就是说，在使用渐变颜色的时候，把它当成图片去使用就可以了。根据渐变颜色的这个特性，我们可以用渐变颜色来指定某一元素的背景图像。写法是：background-image:radial-gradient()。

第四种方法：设置背景图像组

在我们进行网页设计的过程中，有时可能会碰到一个地方需要使用好几个背景图片的情况。那这时我们该怎么办呢?难道要分别使用两个background-image属性，然后定义两个背景图片吗?一旦这样设置的话，后一个设置的background-iamge属性值，就会直接把前一个覆盖掉，是不能设置成功的。解决这种问题的方法就是设置背景图像组，其设置方法是：bakeground-image:url(1),url(2),url(3)。哪个图片地址写在前面，哪个图片就会出现上边。用这种方法定义背景图片，就可以给同一个元素定义多个背景图片而不会相互覆盖，可以做出很多有意思的效果来。

以上就是今天给大家介绍的background-image属性的几种使用方法，希望大家看过这篇文章之后，能获得新的感悟，总结出新的经验，谢谢大家的观看。