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

发布于 2025-01-04 11:54:53 字数 453 浏览 0 评论 0原文

我尝试在 JSFiddle 上设置一个示例，但由于某种原因它显示错误： http://jsfiddle.net/t3DDW/< /a>

无论如何，这是我的 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 上测试了它，第二个背景图像没有显示。

原文

I tried setting up an example on JSFiddle but it shows an error for some reason: http://jsfiddle.net/t3DDW/

Anyway, here is my 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;
}

Only the first background image shows. I have double-checked that both image urls are correct. Is there a reason why the second background image isn't showing up? I tested it both on Chrome and FF and the second bg image doesn't show.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

已下线请稍等 2025-01-11 11:54:53

图像看起来怎么样？堆叠顺序很重要。第一个将被放在其他的上面，依此类推。

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

来自来源：

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

多个背景的堆叠顺序中的示例：

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; */

How do the images look? The stacking order is important. The first will be put on top of the others and so on.

If the first image covers the other image then try to switch the order of the images.

From the source:

The first image in the list is the layer closest to the user, the next
one is painted behind the first, and so on. The background color, if
present, is painted below all of the other layers.

Example from 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; */

回复收藏 0 原文

~没有更多了~