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

Question

我有一个像透明栅格一样的背景叠加层：链接到图像 <-尝试缩小浏览器以查看效果

放大或缩小时（尤其是在移动设备上，这种情况经常发生），图像看起来模糊不清。 是否有一种方法可以使此背景图像在屏幕上始终保持10 x 10像素的大小，而不管页面如何缩放，因此看起来总是清晰的？

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

Answer 1

在高分辨率显示器上，就像在移动设备的显示器上一样，由于小尺寸屏幕上的高分辨率而导致的高像素密度，您将始终具有模糊效果。

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

创建一个双倍尺寸的背景图片：您的图片是10px 10px，而是创建一个20px 20px。
使用所需的大小应用背景图片： 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 个解决方案

解决方案1
1 2012-10-08 12:15:32

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

问题描述

1 个解决方案

解决方案1 1 2012-10-08 12:15:32

解决方案1
1 2012-10-08 12:15:32