0

さて、私はウェブサイトを持っており、フロントページにはこの画像がずっと繰り返されています. Chrome では、希望どおりに 1 回だけ繰り返されます。

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などの多くのブラウザはCSS3構文をサポートしていないため、これを無効と見なします。（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 に答える