html - 如何处理缩小后看起来不好看的背景

Question

我正在处理的网站在某些页面元素后面大量使用平行条纹背景(它基本上是一个 1x2 像素的背景图像，平铺以创建复古水平条纹效果)。

当这些页面被缩小查看时(例如在手机上)，用户会看到破坏效果的波纹图案。

我怎样才能 (a) 在用户查看缩小的页面时降级为平坦的背景颜色，或者最好 (b) 无论缩放如何都强制以 1:1 呈现背景？

Answer 1

如果您使用的是单个图像(不是图 block )，您可以使用 background-size: 100% CSS 属性来强制浏览器不超过图像尺寸。

因为您正在使用磁贴，您需要控制显示窗口的大小来控制磁贴的数量——您可以使用下面的 META 标签来防止在移动设备上缩放(在或out)，并使用媒体查询来自定义 CSS 样式:

<meta name="viewport" content="width=device-width, 
   initial-scale=1,
   maximum-scale=1, 
   user-scalable=0"/> <!--320-->