Question

在Google Chrome浏览器上缩放 out 会使header的背景图像看起来消失。图像的宽度为1像素，但水平重复。

HTML

<html>
    <body>
    <div id="wrapper">
        <header id="header">
            <div id="Nav-Bar"></div>
        </header>
</html>

CSS

#header {
    width: 100%;
    height: 220px;
    background: url("img/headerpattern.png") repeat-x;
    background-size: 1px 165px;
}

我希望无论有人放大/缩小，页面的布局都保持不变。是什么导致了这种行为？

Answer 1

如果缩小窗口，宽度为1px的图像将变小并接近零。宽度为零将不会显示。

我测试了一张图片，如果您使用的图片宽度为4像素，那么谷歌浏览器的缩小效果将达到25％（最大缩小）。