问题背景

经常我们发现一些网站首页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;

这是原图片文字部分效果

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

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

大家是怎么解决的？

通常，这种问题由于不影响功能，也不严重影响视觉效果，对于很多人可能睁一只眼闭一只眼了，所以我们能看到很多网站上面的主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>

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

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

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