你有
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/