問題背景

經常我們發(fā)現(xiàn)一些網站首頁banner圖，顯示出來不是特別清晰，特別是圖片上有很清晰的文字的時候，更為明顯，稍微用心點一眼就可以看出那種模糊的感覺。通過初步分析是網頁有滾動條的時候就出現(xiàn)這種現(xiàn)象。

做過前端開發(fā)的朋友應該都知道，如果是使用img標簽在html文檔中直接嵌入圖片，在一般品質的電腦顯示屏幕上面，需要保證絕對的一致才能保證圖片清晰顯示。比如圖片是500px的，那么在PC上顯示范圍必須也是500px，哪怕499px或者501px都會顯示模糊，也就是不能做絲毫的縮放（當然在手機上我們一般要提供實際顯示大小2-3倍以上的圖片才能保障清晰）。

另外一方面，使用css的background屬性顯示圖片，如果不使用自動縮放，理論上是不會影響圖片圖片的。比如首頁banner圖，我們一般按照最大顯示寬度（如1920px），同時也需要兼容諸如1280px這樣的老款筆記本屏幕大小。這個時候我們一般會使用一張1920px或以上大小的圖，然后通過background-position定位。這樣小于圖片實際大小的屏幕，我們可以看到中間的那部分圖片內容，但這樣并沒有對圖片進行縮放操作，因此理論上不會出現(xiàn)模糊的問題。

但是，實際上很多我們可以發(fā)現(xiàn)很多網站banner圖片上的文字明顯不夠清晰，而我們查看所引用的圖片本身，上面的文字是非常清晰的。

展示下問題

可以對比下下面的效果，圖片都是同一張圖片，但展示出來的效果第三張明顯不一樣。而第二張和第三張是同一張網頁，代碼也是非常簡單和基礎的css背景圖片設置代碼。

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

這是原圖片文字部分效果

這是作為背景圖片時文字部分效果

這是作為背景圖片且網頁出現(xiàn)滾動條時文字部分效果

大家是怎么解決的？

通常，這種問題由于不影響功能，也不嚴重影響視覺效果，對于很多人可能睜一只眼閉一只眼了，所以我們能看到很多網站上面的主banner圖也看上去沒那么清晰。其中有很大一部分是由于圖片本身質量就不夠好很模糊，但也有不少圖片本身質量非常好，但是顯示效果卻總是不盡人意。少部分網站可能也忍受不了這種不完美，于是一般有如下兩種解決方案：

1、使用img代替部分背景圖片，把大背景圖片還是放在css里面，而需要顯示細節(jié)的（如文字），用img加載小圖片的方式完成，也就是“拼接”圖片。

2、需要細節(jié)顯示的元素，特別是文字時間寫在html中，背景圖片相對不需要那么高的品質，比如目前阿里云、騰訊云官網就是采用這種方式。

其實上述兩種方式本質上都是把需要“精致”展示部分從css背景圖片中剝離出來。從效果上確實也可以解決這個問題的，但是如果這樣的背景圖片需要頻繁更換，特別是讓在后臺直接換圖片那就復雜很多了，因為這些“精致”的部分內容，在整個banner圖的位置每次不一定一樣，對于非專業(yè)人士而言即便是把所有設置放在后臺維護，也是相當困難的。

或許這些因素就是不少網站接受不完美的清晰度的banner圖的原因，其中也不乏一些知名公司網站或知名大型網站。

難道就只能接受這種不完美？

通過查找已經公開的資料，并沒有找到直接的解決方案；但通過摸索或許找到更好的解決方案，當然也許有更好的方法只是筆者還不知道而已。

一點點探索得出不一定準確的結論

通過對一定量的分析，筆者發(fā)現(xiàn)了一個規(guī)律，也許可能只是歪打正著，但目前通過大量反復測試跟得出的結論是相符的。這條規(guī)律就是：

當使用CSS設置圖片背景，如果實際顯示區(qū)域與瀏覽器窗口寬度的差值在正負0-5以內，且背景大小與圖片實際大小不一致時，就會出現(xiàn)顯示清晰度異常。

當元素尺寸設置為百分比的時候則是正負5%，當元素尺寸設置為像素的時候則是正負5px。默認是按百分比，實際上div元素默認width的值可以等效于100%。

所以當我們使用一張1920px的圖片作為背景，如果是1920寬度的顯示器，這個時候本來如果按照上述css設置，則剛好實際顯示區(qū)域完全等于瀏覽器窗口寬度，這個時候自然是跟原圖片一樣清晰的。但一旦出現(xiàn)滾動條，那么實際顯示的區(qū)域就變小了，需要減掉滾動條的部分，這時候剛好在0-5以內，所以這個時候圖片變模糊。

為了驗證，我們可以不用滾動條，而手工的約定顯示區(qū)域的大小。比如1920px的圖片，1920的窗口大小。我們分別設置元素尺寸（也就是實際顯示區(qū)域尺寸）為1920px、1917px、1923px、2000px，其中中獎兩組圖片顯示效果變模糊。

假設結論成立，那么怎么相對完美的解決呢？

如果上述結論成立，要解決就好說了，只需要增加一點點代碼即可完成。下面我們就分享一種很簡單就能想到的一種方式，總的來說分幾個步驟來做：

1、設置圖片顯示的元素比實際顯示區(qū)域大，比如窗口大小假設為100%，默認元素展示區(qū)域大小可能是99%的樣子，我們強制重新定義元素尺寸為106%，這樣就不會符合上述加上0-5內的情況，因此根據上述推理就不會圖片變模糊。

2、元素設置成窗口大小106%，自然會“撐破”網頁，出現(xiàn)橫向滾動條。這個時候我們只需要加一層元素的父級元素，且讓父級元素默認大小顯示即可，也就是窗口的99%。且想辦法讓設置背景圖片的那個元素在父級元素中居中顯示。

3、兩個元素二合一之后，從效果上跟直接一個元素直接用最簡單的代碼實現(xiàn)背景圖片一致；但解決了上述背景圖片變模糊的問題。

通過多次測試，使用上述步驟是可以解決圖片變模糊問題，而且?guī)缀醪辉黾娱_發(fā)成本，且完全不增加后續(xù)圖片更換工作操作成本。也就是說原來的代碼如果是下面這樣的：

<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>

下面展示這樣處理后即便有滾動條后，顯示的效果也跟元圖片的清晰度保持一致。

通過相關處理后即便有滾動條圖片清晰度不損失

最后，如果大家有更好、更優(yōu)雅的方法解決這個問題，歡迎大家不吝指導。