移动设备上的多个CSS背景图像

I've created a grid pattern using css background-images as follows:

我使用css background-images创建了一个网格图案,如下所示:

.grid {
    width:720px;
    height:720px;

    background-color: #333333;

    background-image: linear-gradient(rgba(255,255,255,0.1), 1px, transparent 1px),
                      linear-gradient(rgba(255,255,255,0.5), 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.1), 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,0.5), 1px, transparent 1px);

    background-size: 40px 40px,
                     240px 240px,
                     40px 40px,
                     240px 240px;
}

https://jsfiddle.net/nicholasstephan/47zyx3pq/1/

but while this works on just about all desktop browsers, it isn't showing in either Safari or Chrome on iOS. What gives?

虽然这适用于几乎所有桌面浏览器,但它不会在iOS上的Safari或Chrome中显示。是什么赋予了?

Thanks.

1 个解决方案

#1

First of all, you have a slight syntax error, instead of

首先,您有一个轻微的语法错误,而不是

linear-gradient(rgba(255,255,255,0.1), 1px, transparent 1px)

it should be

它应该是

linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px)

And second, setting the visible part of the gradient to 1px on a retina display can give you problems if you are not setting ok the viewport to avoid zooming /rescaling . Have you tried setting it to 2px, or even larger ?

第二,如果您没有设置视口以避免缩放/重新缩放,则在视网膜显示器上将渐变的可见部分设置为1px可能会给您带来问题。您是否尝试将其设置为2px甚至更大?

#1