html5语法参考图片,CSS属性参考 | background-image

background-image属性用于为元素设置一个或多个背景图像，多个背景图像使用逗号来分隔。

background-image属性用于为某个元素设置一个或多个背景图像，各个背景图像以堆叠的方式逐张放置在元素的上面。在各个背景图像层中，第一个图像层最接近屏幕前的观察者。

元素的边框会被绘制在背景图像的上面，而元素的background-color(背景颜色)则会被绘制在所有背景图像的下面。背景图像会根据指定的background-clip属性和background-origin属性来在盒模型中绘制图像。

在某些情况下，元素设置了多个背景图像的时候，一些背景图像层会有透明的区域，这时在它底部的背景图像就可以被看见。

当我们只为元素设置了一个背景图像的时候，应该为元素设置一个背景颜色，这样在背景图像无效的时候，会使用背景颜色来替代。当背景图像可用的时候，背景图像会覆盖在背景颜色的上面。

官方语法

background-image: | none

参数：

：使用设置元素的背景图像。多个背景图像使用逗号分隔。

none：元素不设置背景图像。如果之前为元素设置了背景图像，使用该参数会删除背景图像。

background-image属性的初始值为none。

例如下面的为元素设置背景图像的CSS代码都是正确的：

background-image: none;

background-image: url(images/example.png);

background-image: inherit;

可以使用SVG作为元素的背景图像：

body {

background-image: url("marble.svg");

}

可以为元素设置多个背景图像：

.bg {

background-image: url(first.png), url(second.png);

}

另外还可以使用background-repeat属性来重复背景图像：

.module {

background-image: url(pattern.png);

background-repeat: repeat;

}

适用范围

background-image属性可以使用在所有元素上。

在线演示

下面是一个使用多重背景图像的例子：这个例子中有两张背景图片，一张是天空背景，另一张是氢气球的透明PNG图片。

下面的例子为元素设置一个背景图片，并使背景图片在X和Y轴方向上重复平铺。

浏览器支持

所有的现代浏览器都支持背景图像。包括：Chrome, Firefox, Safari, Opera, IE 和 Android 和 iOS。

支持背景图像使用SVG格式的浏览器有：

支持多重背景图像的浏览器有：

如果浏览器不支持多重背景，会忽略背景图像的声明，此时不会有背景图像被渲染。你可以为旧的浏览器使用Modernizr来提供回退方法。当浏览器不支持多重背景时，为它提供一个单一的背景图像。下面是通过Modernizr来提供回退的示例代码：

.element {

background-image: url(first.png), url(second.png);

}

/* 当浏览器不支持多重背景是设置一个单一的背景图像 */

.no-multiplebgs .element {

background-image: url(fallback.jpg);

}

相关阅读