支持多背景的浏览器(从早期开始的 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 这样的工具来检测对它的支持,并编写一个仅为不支持它的浏览器声明一个背景的回退选择器。
哇!以前不知道这个,太棒了!
值得指出的是,顺序似乎很重要。
如果你有一个作为背景的重复图像,以及一个不重复的单个图像,那么重复的图像需要放在最后,否则它会位于单个图像的顶部。
例如
#box {
background
url(singlecornerbackground.png) no-repeat 0 0,
url(repeatingbackground.jpg) repeat 0 0;
}
至少在 Firefox 3.6 中是这样。目前尚未在其他浏览器中测试。
嗨,我用了一段时间这个方法,直到我注意到它在 IE 中不支持,它没有显示任何图像
background-image: url(‘images/skin.png’), url(images/skin2.png);
background-position: center top;
background-color: transparent;
background-attachment: fixed;
background-repeat: no-repeat, repeat;
有没有看到 IE 的修复方案?
IE 太糟糕了。你必须使用像 modernizr 这样的东西来检测浏览器的支持功能,并为不支持的功能提供条件样式。你也可以尝试包含这个 http://rafael.adm.br/css_browser_selector/,它非常酷,允许你为特定的浏览器编写 CSS。
Chris……如果你是个女孩,我会亲你!!!我尝试解决这个问题很久了 :)
@David
非常感谢链接,非常有用!
请分享一些实际例子!
这对于任何想要使用多个背景在大小可变的内容周围放置自定义边框的人来说可能也很有用……
自定义边框 JSFiddle 示例