0

好吧，我有一个网站，首页一直重复着这张图片。在 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;
}
4

3 回答 3

1

你有

background-repeat: no-repeat, repeat;

您只能指定一个no-repeat 或 repeat- 不能同时指定，例如

background-repeat: no-repeat;

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

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

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/

于 2012-05-21T19:23:27.213 回答
0

试试这个：

body {
color: #999999;
background-color: #490000;
background-image:url('http://pigymunk.co.uk/bgasdf2.png');
background-position: fixed;
background-repeat: no-repeat;
}
于 2012-05-21T19:23:27.440 回答
0

这对我来说在 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;
}
于 2012-05-21T19:29:35.243 回答