kap*_*oko 8 html javascript css jquery 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;">