浅析当网页出现滚动条时背景图片上的文字变模糊问题及解决方案

2021-09-29 16:16 栏目:技术开发 查看(12500)

问题背景

经常我们发现一些网站首页banner图,显示出来不是特别清晰,特别是图片上有很清晰的文字的时候,更为明显,稍微用心点一眼就可以看出那种模糊的感觉。通过初步分析是网页有滚动条的时候就出现这种现象。

做过前端开发的朋友应该都知道,如果是使用img标签在html文档中直接嵌入图片,在一般品质的电脑显示屏幕上面,需要保证绝对的一致才能保证图片清晰显示。比如图片是500px的,那么在PC上显示范围必须也是500px,哪怕499px或者501px都会显示模糊,也就是不能做丝毫的缩放(当然在手机上我们一般要提供实际显示大小2-3倍以上的图片才能保障清晰)。

另外一方面,使用css的background属性显示图片,如果不使用自动缩放,理论上是不会影响图片图片的。比如首页banner图,我们一般按照最大显示宽度(如1920px),同时也需要兼容诸如1280px这样的老款笔记本屏幕大小。这个时候我们一般会使用一张1920px或以上大小的图,然后通过background-position定位。这样小于图片实际大小的屏幕,我们可以看到中间的那部分图片内容,但这样并没有对图片进行缩放操作,因此理论上不会出现模糊的问题。

但是,实际上很多我们可以发现很多网站banner图片上的文字明显不够清晰,而我们查看所引用的图片本身,上面的文字是非常清晰的。

展示下问题

可以对比下下面的效果,图片都是同一张图片,但展示出来的效果第三张明显不一样。而第二张和第三张是同一张网页,代码也是非常简单和基础的css背景图片设置代码。

background: url(3.png) no-repeat center;

QQ截图20210929152415

这是原图片文字部分效果

QQ截图20210929152634

这是作为背景图片时文字部分效果

QQ截图20210929153050

这是作为背景图片且网页出现滚动条时文字部分效果

大家是怎么解决的?

通常,这种问题由于不影响功能,也不严重影响视觉效果,对于很多人可能睁一只眼闭一只眼了,所以我们能看到很多网站上面的主banner图也看上去没那么清晰。其中有很大一部分是由于图片本身质量就不够好很模糊,但也有不少图片本身质量非常好,但是显示效果却总是不尽人意。少部分网站可能也忍受不了这种不完美,于是一般有如下两种解决方案:

1、使用img代替部分背景图片,把大背景图片还是放在css里面,而需要显示细节的(如文字),用img加载小图片的方式完成,也就是“拼接”图片。

2、需要细节显示的元素,特别是文字时间写在html中,背景图片相对不需要那么高的品质,比如目前阿里云、腾讯云官网就是采用这种方式。

其实上述两种方式本质上都是把需要“精致”展示部分从css背景图片中剥离出来。从效果上确实也可以解决这个问题的,但是如果这样的背景图片需要频繁更换,特别是让在后台直接换图片那就复杂很多了,因为这些“精致”的部分内容,在整个banner图的位置每次不一定一样,对于非专业人士而言即便是把所有设置放在后台维护,也是相当困难的。

或许这些因素就是不少网站接受不完美的清晰度的banner图的原因,其中也不乏一些知名公司网站或知名大型网站。

难道就只能接受这种不完美?

通过查找已经公开的资料,并没有找到直接的解决方案;但通过摸索或许找到更好的解决方案,当然也许有更好的方法只是笔者还不知道而已。

一点点探索得出不一定准确的结论

通过对一定量的分析,笔者发现了一个规律,也许可能只是歪打正着,但目前通过大量反复测试跟得出的结论是相符的。这条规律就是:

当使用CSS设置图片背景,如果实际显示区域与浏览器窗口宽度的差值在正负0-5以内,且背景大小与图片实际大小不一致时,就会出现显示清晰度异常。

当元素尺寸设置为百分比的时候则是正负5%,当元素尺寸设置为像素的时候则是正负5px。默认是按百分比,实际上div元素默认width的值可以等效于100%。

所以当我们使用一张1920px的图片作为背景,如果是1920宽度的显示器,这个时候本来如果按照上述css设置,则刚好实际显示区域完全等于浏览器窗口宽度,这个时候自然是跟原图片一样清晰的。但一旦出现滚动条,那么实际显示的区域就变小了,需要减掉滚动条的部分,这时候刚好在0-5以内,所以这个时候图片变模糊。

为了验证,我们可以不用滚动条,而手工的约定显示区域的大小。比如1920px的图片,1920的窗口大小。我们分别设置元素尺寸(也就是实际显示区域尺寸)为1920px、1917px、1923px、2000px,其中中奖两组图片显示效果变模糊。

假设结论成立,那么怎么相对完美的解决呢?

如果上述结论成立,要解决就好说了,只需要增加一点点代码即可完成。下面我们就分享一种很简单就能想到的一种方式,总的来说分几个步骤来做:

1、设置图片显示的元素比实际显示区域大,比如窗口大小假设为100%,默认元素展示区域大小可能是99%的样子,我们强制重新定义元素尺寸为106%,这样就不会符合上述加上0-5内的情况,因此根据上述推理就不会图片变模糊。

2、元素设置成窗口大小106%,自然会“撑破”网页,出现横向滚动条。这个时候我们只需要加一层元素的父级元素,且让父级元素默认大小显示即可,也就是窗口的99%。且想办法让设置背景图片的那个元素在父级元素中居中显示。

3、两个元素二合一之后,从效果上跟直接一个元素直接用最简单的代码实现背景图片一致;但解决了上述背景图片变模糊的问题。

通过多次测试,使用上述步骤是可以解决图片变模糊问题,而且几乎不增加开发成本,且完全不增加后续图片更换工作操作成本。也就是说原来的代码如果是下面这样的:

<div style="
width: 100%;
height: 500px; 
background: url(3.png) no-repeat center;"></div>

当然实际上的代码一般不会这么写,只是为了方便演示把html和css写在一起。修改成下面这样的代码:

<div style="width:100%; overflow: hidden;">
     <div style=" width:106%; 
                  margin-left:-3%; 
                  height:500px;
                  background: url(3.png) no-repeat center;"></div>
</div>

下面展示这样处理后即便有滚动条后,显示的效果也跟元图片的清晰度保持一致。

QQ截图20210929161225

通过相关处理后即便有滚动条图片清晰度不损失

最后,如果大家有更好、更优雅的方法解决这个问题,欢迎大家不吝指导。

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:浅析当网页出现滚动条时背景图片上的文字变模糊问题及解决方案 - 微构网络
分享: