众所周知，background-image属性用于设置背景图像。一般的写法是background-image: url（）。这种类型的写入也是最常见和最常用的方法，直接调用图像地址简单快捷。但人力有时很差，更不用说该地区的财产了？下面，我将向您介绍几种背景图像属性设置方法，希望能帮助您加深对此属性的理解。

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

这种方法对每个人来说都是最常用的方法，大多数方法都会被使用，我不再重复了。直接干货。

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

此方法写为：bakeground-image: url（base64）。这种方法是将图像直接转换为base64代码镶嵌到网页中。该方法设置的背景图像可以减少一个http请求，累积量较少，有利于前端优化。但这种方法也有其自身的缺点。 Base64编码太长，无法将太大的图像转换为base64编码。那么如何将图像转换为base64编码？这需要编码转换工具。您可以访问Script House在线工具页面找到它，或者您可以直接访问此页面：http://tools.jb51.net/transcoding/base64。

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

在我们的潜意识中，渐变颜色经常被错误地识别为颜色。实际上，渐变颜色在处理时被视为图像。换句话说，使用渐变颜色时，请将其用作要使用的图片。根据渐变颜色的性质，我们可以使用渐变颜色来指定元素的背景图像。写作方式是：background-image: radial-gradient（）。

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

在网页设计过程中，有时我们可能会遇到需要使用多个背景图像的情况。那我们该怎么办？是否要分别使用两个背景图像属性，然后定义两个背景图像？设置此项后，后一个设置的background-iamge属性值将直接覆盖前一个。它无法成功设置。该问题的解决方案是设置背景图像组，其设置为：bakeground-image: url（1），url（2），url（3）。在前面写入哪个图像地址，在上面显示哪个图像。通过以这种方式定义背景图像，您可以为同一元素定义多个背景图像而不会相互覆盖，您可以制作许多有趣的效果。

以上是今天介绍给您的background-image属性的使用。我希望在阅读本文后，您可以获得新的见解并总结新的经验。谢谢你的收看。

这篇文章来自Nicole Nicole Anime：http://www.nikenike.cn/。请注明出处，谢谢。

« 2017年即将结束。网易大师如何做设计年度总结？ | 好的文案会撒谎，经常使用这四种“作弊”技巧 »