Question

我尝试在JSFiddle上设置示例，但出于某种原因显示错误：http://jsfiddle.net/t3DDW/

无论如何，这是我的css：

body {
    background:
        url("images/bg.gif") repeat 0 0,
        url("images/bg-top.gif") repeat-x 0 0;
    color: #666;
    font: 62.5%/1.5em helvetica, arial, sans-serif;
}

仅显示第一张背景图片。我仔细检查过两个图片网址都是正确的。是否有原因导致第二张背景图像没有出现？我在Chrome和FF上测试了它，第二个bg图像没有显示。

Answer 1

图像如何显示？堆叠顺序很重要。第一个将被放在其他人之上，依此类推。

如果第一张图像覆盖另一张图像，请尝试切换图像的顺序。

来自source：

列表中的第一个图像是最靠近用户的图层，下一个图像一个画在第一个后面，依此类推。背景颜色，如果现在，被绘制在所有其他层之下。

来自Stacking Order of Multiple Backgrounds的示例：

background:
   url(number.png) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
   url(thingy.png) 10px 10px no-repeat,   /*            like z-index: 3; */
   url(Paper-4.png);                      /* On bottom, like z-index: 1; */

我的css3多个背景图片代码有什么问题？

1 个答案: