59

の複数の背景サポートを使用してオーバーレイ付きのページ背景を作成しようとしています。

html, body {
  background: url('https://github.com/jaysalvat/vegas/raw/master/overlays/01.png') repeat,
              url('http://farm8.staticflickr.com/7260/7502004958_595bf03fbf_z.jpg') top left no-repeat;
  background-size: cover;
}​

写真の背景画像でページを「覆い」、オーバーレイを小さく（3 * 3px）、穴のページ上で繰り返します。

上記の例では、 http：//jsfiddle.net/tpmD4/（ページを覆うオーバーレイも）が表示されます。

どうすれば修正できますか？

両方の画像のを指定しようとすると（ background-size: 3px 3px, cover;）; その場合、画像の背景はカバーされませんが、オーバーレイは機能します。

4

1 に答える 1

105

どうぞ：

html, body {
    background-image: url(01.png), url(z.jpg);
    background-repeat: repeat, no-repeat;
    background-position: 0 0;
    background-size: 3px 3px, cover;
}

http://jsfiddle.net/tpmD4/6/

于 2012-07-13T10:40:09.107 に答える