Question

我想为div提供3张背景图片。我知道CSS2和CSS3都可以处理2个图像，但它们可以处理3个吗？

背景图片纯粹是出于美观的原因，所以如果它不适用于所有浏览器都可以。我应该使用CSS2或CSS3吗？它们的支持程度如何？

谢谢

Answer 1

我相信，使用CSS3，您可以拥有任意数量的内容。你只需用逗号链接起来：

http://www.css3.info/preview/multiple-backgrounds/

Answer 2

CSS2不能这样做但你可以在一个容器中放入3个div，每个div都有不同的背景图像：

.box { width:100%; height:100%; position:absolute; top:0px; right:0px }
.bg1 { background-image: url( <..image 1 url> ); }
.bg2 { background-image: url( <..image 1 url> ); }
.bg3 { background-image: url( <..image 1 url> ); }
.container { width:400px; height: 400px; position:relative; }

HTML

...
<div class="container">
    <div class="box bg1"> </div>
    <div class="box bg2"> </div>
    <div class="box bg3"> </div>
</div>

这样您就可以使用z-index属性控制哪个顺序显示。

您可以使用第四个div来放置内容，将背景与内容分开

希望这有帮助

Answer 3

单个元素上的多个背景仅在CSS3中可用，因此仅受到诸如Chrome，Safari和最新Firefox等A级浏览器的支持。

支持CSS2并且（在理论上）应该在IE8（可能是7）中工作的替代解决方案是：before和：after伪类。这有助于保持标记清洁（不必在容器元素中添加多个div），并且应该具有更广泛的浏览器兼容性。

http://www.quirksmode.org/css/beforeafter.html

Answer 4

据我所知，CSS2中不支持多个背景（甚至不是2？），CSS3支持只会是更现代的浏览器，这次不包括IE8

应用两个图像的常用方法是使用额外的包装div，将一个图像作为背景放在外部div上，另一个放在元素本身或另一个包装div上，假设它也适用于3，但如果这样也是许多包装器如何为所有浏览器提供2个，对于现代浏览器提供第三个包装器作为后备，第三个和其他包装器可以作为多个背景应用于上述任何一个包装器/元件

Answer 5

如果你想快速反映CSS 2或3可以做什么以及哪些浏览器支持这些功能，那么这个网站很棒http://www.findmebyip.com/litmus/#target-selector

目前唯一的另一种方式就是如上所述，应用了背景图像的绝对定位div，我使用这种方法来处理IE6的兼容性。

在CSS中支持3个背景图像？

5 个答案: