CSS多重背景图像都是repeat-x [英] CSS multiple Background Images both repeat-x

问题描述

我试图在一个div中获取多个背景图片。 两者必须重复x。

I try to get multiple background images in one div at the moment. Both must repeat-x.

第一张图片应该从div的左上角开始，最多50％。

第二个应该从div的中间到右端开始。

The second should start at the middle to the right end of the 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。

My problem is that only image1 is shown.

推荐答案

感谢Devilquest。我有一个问题与顶部repeat-x，底部重复x为一个div中的2个图像。适用于Chrome，在IOS上失败。换成

Thanks to Devilquest. I was having issues with "top repeat-x , bottom repeat-x" for 2 images in one div. Works on Chrome, fails on IOS. Swapped to

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

现在在safari，iPhone等上工作良好

and now working fine on safari, iPhones etc

这篇关于CSS多重背景图像都是repeat-x的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！