CSS多個背景圖像都重復-x

Question

我現在嘗試在一個div中獲取多個背景圖像。 兩者都必須重復-x。

第一張圖片應從左上角開始， 直到 div的50％ 。

第二個應該從div 的右端開始。

我嘗試了以下方法：

.myDiv {
    background-image: url('image1.png'), url('image2.png');
    background-repeat: repeat-x, repeat-x;
    background-position: left top, center top;
    background-size: 50% 100%, 50% 100%;
}

我的問題是只顯示了image1。

Answer 1

嘗試使用該background: url('image1.png'), url('image2.png'); 而不是background-image:

這是Jsfiddle中的演示

您可以看到兩個圖像都出現。

希望它幫助

Answer 2

為這樣的任何元素設置兩個背景圖像

 background: url(number.png) 600px 10px no-repeat, /* On top, like z-index: 4; */ url(thingy.png) 10px 10px no-repeat, /* like z-index: 3; */ url(Paper-4.png); 

Answer 3

感謝Devilquest。 我在一格中有2張圖片的“頂部重復x，底部重復x”問題。 在Chrome上運行，在IOS上運行失敗。 交換到

 background: url ();
 background-repeat: repeat-x, repeat-x;
 background-position: top , bottom;

現在可以在野生動物園，iPhone等上正常工作