具有不同背景大小的多个背景

Question

我正在尝试使用css3的多重背景支持创建带有叠加层的页面背景;

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;); 然后图像背景不会覆盖,但叠加层工作.

Answer 1

干得好:

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/