具有背景大小的多個背景

我正在嘗試使用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

具有背景大小的多個背景

回答

相關問題