gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 13:52:56 24 4
gpt4 key购买 nike

我有这个类似光栅的透明背景叠加层:link to image <-- 尝试缩小浏览器以查看效果

当放大或缩小时(尤其是在移动设备上经常发生这种情况),图像往往看起来脏兮兮的和丑陋的。有没有办法让这个背景图像在屏幕上的大小始终为 10 x 10 像素,无论页面如何缩放,所以它总是看起来很清晰?

我做了一些搜索,发现这可能是一项艰巨的任务。如果这是不可能的:有没有办法改变缩放过滤器,使图像在缩小或放大时看起来更好?

最佳答案

在高分辨率显示器上,就像移动设备的显示器一样,​​由于小尺寸屏幕上的高分辨率导致高像素密度,您总是会看到模糊的效果。

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

  • 创建双倍大小的背景图像:您的图像是 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;">

关于javascript - 当用户放大或缩小时防止背景图像缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12781163/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com