Question

我有这种透明的栅格式背景叠加：link to image＆lt; - 尝试缩小浏览器以查看效果

当放大或缩小时（特别是在移动设备上这种情况发生了很多），图像看起来往往看起来很脏和丑陋。有没有办法让这个背景图像在屏幕上总是大小为10 x 10像素，无论页面如何缩放，所以它总是看起来很清晰？

进行一些搜索我发现这可能是一项艰巨的任务。万一是不可能的：有没有办法改变缩放滤镜，使图像在缩小或缩小时看起来更好？

Answer 1

在高分辨率显示器上，与移动设备的显示器一样，由于小尺寸屏幕上的高分辨率，因此像素密度较高，因此总是会产生模糊效果。

有一种解决方法可以解决这个问题：

创建一个双倍大小的背景图片：你的图像是10px 10px，而不是创建一个20像素的20像素。
使用所需尺寸应用背景图片：background-size: 10px 10px;

有了这个技巧，当在高分辨率显示器上放大或查看图像时，图像将不再模糊。

根据评论中的要求，以下是使背景大小适应缩放的代码：

JAVASCRIPT：

if (window.addEventListener){           
    window.addEventListener('resize', setBackground, false);
} else {
    window.attachEvent('onresize', setBackground);
}

function setBackground(){
    document.body.style.backgroundSize =
        (((( window.screen.width / ( window.screen.width / getImageWidth() )) / 10) > 1 ) ? (( window.screen.width / ( window.screen.width / getImageWidth() )) / 10) : 1) + "%";
}

function getImageWidth(){

    var imageSrc = document
                    .body
                     .style
                      .backgroundImage
                       .replace(/url\((['"])(.*?)\1\)/gi, '$2')
                        .split(',')[0];

    var image = new Image();
    image.src = imageSrc;

    var width = image.width;

    return width;

}

<强> HTML：

<body onLoad="javascript:setBackground();" style="background: url(bkg.jpg) repeat;">

用户放大或缩小时防止背景图像缩放

1 个答案: