我们大年夜家都知道，background-image这个属性是用来设置背景图片的，一般的写法是background-image:url()。这种写法也是最常用最广泛的办法，可以直接调用图片地址，简单又快捷。然则人力有时穷，何况戋戋一个属性?下边，我再给大年夜家介绍几种background-image属性的设置办法，欲望能赞助大年夜家加深对这个属性的懂得。

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

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

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

　　这种办法的写法是：bakeground-image:url(base64)。这种办法是直接把图片转化成base64编码镶嵌到网页中，用这种办法设置的背景图片，可以削减一个http请求，积少成多，有利于前端优化。然则这种办法也有本身的缺点，base64编码太过冗长，不实用于将太大年夜的图片转换成base64编码。那么该若何将图片转化成base64编码呢?这就须要用到编码转化对象了。大年夜家可以本身到脚本之家在线对象页面去寻找，也可以直接拜访这个页面：http://tools.jb51.net/transcoding/base64。

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

　　第三种办法：用渐变色彩作为背景图像

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

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

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

　　文章来自妮可妮可动漫网：http://www.nikenike.cn/。转载请标明出处，感谢。