[英]CSS multiple Background Images both repeat-x
I try to get multiple background images in one div at the moment. 我现在尝试在一个div中获取多个背景图像。 Both must repeat-x.
两者都必须重复-x。
The first image should start at the top-left point up to 50% of the div. 第一张图片应从左上角开始, 直到 div的50% 。
The second should start at the middle to the right end of the div. 第二个应该从div 的右端开始。
I tried the following: 我尝试了以下方法:
.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%;
}
My problem is that only image1 is shown. 我的问题是只显示了image1。
Try with that background: url('image1.png'), url('image2.png');
尝试使用该
background: url('image1.png'), url('image2.png');
instead of background-image:
而不是
background-image:
Here is a demo in Jsfiddle 这是Jsfiddle中的演示
You can see both images appear. 您可以看到两个图像都出现。
Hope it hepls 希望它帮助
Set two background images for the any element like this 为这样的任何元素设置两个背景图像
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);
Thanks to Devilquest. 感谢Devilquest。 I was having issues with "top repeat-x , bottom repeat-x" for 2 images in one div.
我在一格中有2张图片的“顶部重复x,底部重复x”问题。 Works on Chrome, fails on IOS.
在Chrome上运行,在IOS上运行失败。 Swapped to
交换到
background: url ();
background-repeat: repeat-x, repeat-x;
background-position: top , bottom;
and now working fine on safari, iPhones etc 现在可以在野生动物园,iPhone等上正常工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.