IE不会识别不重复？答案

【问题标题】：IE won't recognize a no-repeat?IE不会识别不重复？
【发布时间】：2012-07-16 21:36:19
【问题描述】：

嗯，I have a website 和首页一直重复着这张图片。在 Chrome 上，只重复一次，就像我想要的那样。

body {
    color: #999999;
    background-color: #490000;
    background:url('http://pigymunk.co.uk/bgasdf2.png') fixed, url('http://pigymunk.co.uk/bgasdf.png') fixed;
    background-repeat: no-repeat, repeat;
    background-position: left top, left top;
}

【问题讨论】：

标签： css internet-explorer fault

【解决方案1】：

你有

background-repeat: no-repeat, repeat;

您只能指定no-repeat 或 repeat - 不能同时指定两者，例如

background-repeat: no-repeat;

Chrome 支持 CSS3 语法，但许多浏览器（如 IE）认为这是无效的，因为它不支持它。（记住 CSS2 是标准的，CSS3 只是部分支持）

更新： 要创建分层背景，您需要使用 layers 惊喜 :)。

body {
    color: #999999;
    background-color: #490000;
    background: url('http://pigymunk.co.uk/bgasdf.png');
    background-repeat: repeat;
    background-position: left top;
}

#logo {
    height: 200px;
    width: 220px;
    background: url('http://pigymunk.co.uk/bgasdf2.png') no-repeat top left;
    position: absolute;
    top: 0px; left: 0px;
}

HTML：

<body>
<div id="logo"></div>
...

或者更好的是，不要为您的徽标使用背景图片，因为当背景图片关闭时它不会出现，例如用于打印。将图像裁剪为徽标的正确大小并将其放入 html

<body>
<div id="logo"><img src="http://pigymunk.co.uk/bgasdf2.png" alt="Piggymunk logo" /></div>

...

jsfiddle 示例：http://jsfiddle.net/ytL2w/

【讨论】：

但它在 Chrome 中运行良好，当我访问博客（在 IE 上）时，它可以正常运行。
但是如果我这样做，它只有一个，（不重复）我需要重复然后不重复。
@user1408280 CSS 不允许这种语法，所以你 想要什么 并不重要——你只能做 CSS 允许你做的事情 :) 但我不这样做不明白你的意思是“重复和不重复”吗？
好的，谢谢，但是有什么办法可以得到我想要的分层背景？
你不需要用脸部重复背景。创建一个单独的 div 作为内容的一部分并将其放入其中

【解决方案2】：

这对我来说在 IE9 中运行良好：

body {
    color: #999999;
    background-color: #490000;
    background: url('http://pigymunk.co.uk/bgasdf2.png') no-repeat fixed left top, 
    url('http://pigymunk.co.uk/bgasdf.png') repeat fixed left top;
}

【讨论】：

使用单独的 CSS 属性不是问题，所以两者都应该工作，这是 OP 的语法无效的事实。
是的，但我需要第二个背景 bgasdf.png 位于其下方并重复，但感谢您的帮助
列出的第一个是最上面的。所以你必须把你想要的放在最后。
我再次阅读了问题和评论 - 这不是你想要的 dabblet.com/gist/2764131 吗？背景图像pigymunk.co.uk/bgasdf.png 在下方并重复，pigymunk.co.uk/bgasdf2.png 在上方，不重复。
请记住，这是 CSS3 语法，并非所有浏览器都完全支持 - 正如@pigymunk 所发现的那样。（它可以在 IE9 中使用，因为它确实支持它，但以前版本的 IE 不支持）

【解决方案3】：

试试这个：

body {
color: #999999;
background-color: #490000;
background-image:url('http://pigymunk.co.uk/bgasdf2.png');
background-position: fixed;
background-repeat: no-repeat;
}

【讨论】：

看看这个网站，它有 2 个背景层叠在一起