具有背景大小的多个背景

我正在尝试使用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;）指定background-size;那么图像背景不会覆盖，但叠加效果很好。

来源

2012-07-13 Mattias

不知道，如果你想要做什么是可能的，但现在看来似乎应该是因为这将是有意义的是能够指定每个图像的背景大小属性。只想我能想到的是放置宽度和高度为100％的div，并将第二个背景图像放在该div上。 – 2012-07-13 10:32:42

此页面建议它应该工作：http://www.css3.info/preview/background-size/ ---- #examplen { width：580px; height：200px; background-image：url（img/sheep.png），url（img/sheep.png），url（img/betweengrassandsky.png）; background-repeat：no-repeat; background-position：20px 100px，400px 50px，center bottom; background-color：#EEE; background-size：70px，auto，cover; } – 2012-07-13 10:37:12

Okey我也认为它应该是posible，我已经考虑过你的想法，但我只是想避免第二个div，如果它是posible .. thx！ – Mattias 2012-07-13 10:37:31

在这里你去：

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-13 10:40:09

非常感谢你，它非常棒！ – Mattias 2012-07-13 10:45:17

当然，你不希望有一个小图像覆盖整个背景，你想以适当的大小重复它！非常感谢！ – 2013-02-22 19:02:42

这可能是最新版本的Chrome中可能存在的问题，但背景大小和位置属性对我没有任何帮助。逗号分隔的背景虽然工作得很好。 – Gopherkhan 2017-03-03 00:30:06

具有背景大小的多个背景

回答

相关问题