Question

好吧，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;
}

Answer 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/

Answer 2

试试这个：

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

Answer 3

这对我来说在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;
}

IE不会识别不重复？

3 个答案: