当前位置:首页 > 技术分享 > 详情
sousuo
sousuo

网站背景图片模糊,快看下是不是图片尺寸偶数造成的

上传时间:2021-11-02            浏览次数:188

今天碰到一个技术问题,我们做了一个图片演示,宽度是1920像素,作为body的背景图,发现一个奇怪的现象:图片清晰,但放到网页上却很模糊。于是查看原因,发现去掉背景图片的background-position:center 0;图片就变清晰了。

问题是,图片必须要居中,作为背景图。

于是尝了一个一个特殊的办法:

把1920px宽度的图画布扩大的1921px,成功了!

为什么会出现这样的现象呢?

猜测是因为浏览器进行居中对齐的过程中,必须选一个整数的左右边距,如果是偶数,中心点需要是在第959和第960个点之间,那么浏览器就会自动给图片缩小成1919像素或者1921像素。

这样才有一个确定的像素点在中线上。

这样说可能有点难懂,我们来举个例子,比3像素和4像素的区别:

一、3像素宽度的图形中间点就是第二个像素点

这样的居中就是第二个像素点在中线上。于是可以很清晰。

二、4像素宽度的图形中心点,是在第2~3像素之间

这样,浏览器或者电脑的某种原理,需要给图片压缩到3像素,然后找中心点,对应某一个像素点。这样就引起模糊了。

但无论如何,有一个经验,那就是背景图片居中的情况下,宽度需要是奇数,这样可以减少模糊的发生概率。对于有时候文字的模糊等等,大家也可以参照奇数、偶数的方式去修正看看效果。

发表评论
请遵守网络文明公约,理性发言
访客头像

还没有人来评论,快来抢个沙发吧!

0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们