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

【问题标题】：Multiple backgrounds with different background-size具有不同背景大小的多个背景
【发布时间】：2012-07-13 10:23:24
【问题描述】：

我正在尝试使用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 时（background-size: 3px 3px, cover;）；那么图像背景不覆盖，但覆盖工作。

【问题讨论】：

不确定您尝试执行的操作是否可行，但似乎应该可以为每个图像指定 background-size 属性。唯一认为我能想到的就是放置一个宽度和高度为 100% 的 div，并将您的第二个背景图片放在该 div 上。
这个页面建议它应该可以工作：css3.info/preview/background-size ---- #examplen { width: 580px;高度：200px；背景图像：url（img/sheep.png），url（img/sheep.png），url（img/betweengrassandsky.png）；背景重复：不重复；背景位置：20px 100px，400px 50px，中底；背景颜色：#EEE；背景尺寸：70px，自动，封面； }
Okey 我也认为它应该是可能的，我已经考虑过你的想法，但我只是想避免第二个 div 如果可能的话.. thx！

标签： css3 background-size css

【解决方案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/

【讨论】：

当然，您不希望单个小图像覆盖整个背景，您希望以适当的大小重复它！非常感谢！
在最新版本的 chrome 中可能有问题，但 background-size 和 position 属性对我没有任何作用。不过，逗号分隔的背景效果很好。
@Gopherkhan 我知道这是一个迟到的回复，但以防万一。我对背景大小有类似的问题，问题是在执行多个大小时使用继承或初始。改用 auto 为我解决了这个问题。有点像explanation here