移动设备上有多个 CSS 背景图片

Question

我使用 css 背景图像创建了一个网格图案，如下所示：

.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/

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

谢谢。

Answer 1

首先，你有一个轻微的语法错误，而不是

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

应该是

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

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

移动设备上有多个 CSS 背景图片

Multiple CSS background-image's on Mobile

css

background-image

ios