多背景语法

Avatar of Chris Coyier
Chris Coyier

支持多背景的浏览器(从早期开始的 WebKit,Firefox 3+)使用如下语法

#box {
  background: 
    url(icon.png) top left no-repeat, 
    url(texture.jpg), 
    url(top-edge.png) top left repeat-y;
}

它们以逗号分隔,可以根据需要使用任意数量的 URL、定位和重复值。你甚至可以将 WebKit 渐变混合其中。

#box {
	background: 
		url(../images/arrow.png) 15px center no-repeat,
		-webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));
}

Mac 上的旧版 IE 会显示列表中的第一个背景,但其他不支持它的浏览器则会完全失败,并且根本不显示任何背景。这使得渐进增强变得困难。也就是说,除非你使用像 Modernizr 这样的工具来检测对它的支持,并编写一个仅为不支持它的浏览器声明一个背景的回退选择器。