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;
}

我希望照片背景图片能够覆盖＆＃34;覆盖＆＃34;页面和叠加层在孔页面上重复较小（3 * 3px）。

上面的例子给了我http://jsfiddle.net/tpmD4/（也是覆盖页面的叠加层）。

我该如何解决？

当我尝试为两个图像background-size: 3px 3px, cover;）指定background-size时;然后图像背景不会覆盖，但叠加层会起作用。

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/

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

1 个答案: