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

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

javascript jquery html css image

Javascript 防止在用户放大或缩小时缩放背景图像,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,Image,我有一个像光栅一样透明的背景覆盖：在高分辨率显示器上，就像移动设备的显示器一样，由于小屏幕上的高分辨率，像素密度高，所以总是会产生模糊效果有一个解决方法可以解决此问题：创建一个双倍大小的背景图像：您的图像是10px 10px，请创建一个20px 20px的图像使用所需大小应用背景图像：背景大小：10px 10px 使用此技巧，放大或在高分辨率显示器上查看图像时，图像将不再模糊根据注释中的要求，以下是根据缩放调整背景大小的代码： JAVASCRIPT: if (window.addEv

我有一个像光栅一样透明的背景覆盖：在高分辨率显示器上，就像移动设备的显示器一样，由于小屏幕上的高分辨率，像素密度高，所以总是会产生模糊效果

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

创建一个双倍大小的背景图像：您的图像是10px 10px，请创建一个20px 20px的图像
使用所需大小应用背景图像：
```
背景大小：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;

}       

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

HTML:
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;

}       

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


谢谢，有道理！但最大的问题是缩小。放大会使其模糊，但这是可以接受的。缩小会让它看起来很难看（也是因为我使用的背景图像）。但我真正想弄清楚的是，背景图像是否可能总是在屏幕上使用适当数量的像素（因此，图像大小为10 x 10 px的图像总是在屏幕上使用10 x 10 px），无论缩放级别如何。我做了一些尝试。。。你的想法基本上是，如果用户缩小，设置一个较大的图像，如果放大，设置一个较小的图像。是吗？编辑了这篇文章。这个公式并不完美，需要一些修改。但这就是你的想法。公式改变了。现在可以很好地处理大小背景。希望有帮助！谢谢你的帮助，@Cirou！不过我还没弄清楚。我已在此处尝试了您的代码：。在不同的缩放级别上，它仍然显示出我所说的“丑陋”。另外，当我调整浏览器大小时，您的代码似乎将背景大小设置为0%，因此不显示背景。我添加这张图片是为了澄清我的意思（一定要查看完整尺寸：请随意摆弄；）！