問題背景

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

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

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

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

展示下問題

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

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

這是原圖片文字部分效果

這是作為背景圖片時(shí)文字部分效果

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

大家是怎么解決的？

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

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

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

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

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

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

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

一點(diǎn)點(diǎn)探索得出不一定準(zhǔn)確的結(jié)論

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

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

當(dāng)元素尺寸設(shè)置為百分比的時(shí)候則是正負(fù)5%，當(dāng)元素尺寸設(shè)置為像素的時(shí)候則是正負(fù)5px。默認(rèn)是按百分比，實(shí)際上div元素默認(rèn)width的值可以等效于100%。

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

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

假設(shè)結(jié)論成立，那么怎么相對完美的解決呢？

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

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

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

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

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

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

當(dāng)然實(shí)際上的代碼一般不會這么寫，只是為了方便演示把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>

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

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

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