CSS背景圖像的簡單響應

時間 2019-12-11

標籤 css 背景圖像簡單響應欄目 CSS 简体版

原文原文鏈接

本文設有不少，最理想的解決方案，響應圖像只是其中之一。咱們建議您查看不一樣的方法，而後再選擇一個特定的響應圖像解決方案，包括這兩個：如何避免重複下載響應圖像中選擇響應圖像解決方案。css

你們都在談論的的srcset屬性和元素，以及服務器端的技術，如響應性的Web設計+服務器端組件(RESS)如新的HTML5標準，得出的結論是簡單，靜態的，你會原諒網站不能支持響應的圖像。這一結論可能爲時過早，可是。其實，有一個簡單的，簡單的方法來提供響應的圖像，支持全部當今的Web瀏覽器：CSS背景圖像。html

然而，這種方法有必定的侷限性，並在全部狀況下，這是行不通的。可是，若是你的要求並不複雜，若是你願意作出額外的努力，以確保您的圖像訪問，CSS背景圖像多是你所須要的。web

在這篇文章中，咱們將着眼於CSS背景辦法在如下幾個步驟：瀏覽器

首先，咱們要反省的目標和要求，爲響應圖像。服務器

而後，咱們將看到CSS媒體查詢如何能夠幫助肯定咱們的用戶設備的重要特徵。網絡

咱們將探討的關鍵CSS 背景圖像，讓咱們應對這些特性的屬性。ide

咱們將着眼於優化彌補響應集的各個圖像的戰略。工具

咱們將研究這種方法的侷限性，在許多狀況下，也有簡單的技術來克服它們。佈局

最後，咱們將介紹這種方法的問題，尚未解決方法。測試

注：這種方法須要明確的控制您的網站的樣式表，以及它的HTML標記。若是您的網站依賴於一個內容管理系統(CMS)，你可能沒有足夠的控制這些方面的網站。

極品響應圖像

響應圖像響應的Web設計(RWD)，設計由伊桑馬科特戰略，以應對驚人的普及，移動設備瀏覽網頁的重要組成部分。伊桑認識，之前的最佳實踐方案-爲不一樣類型的設備開發單獨的網站-根本沒法應付各類驚人的設備，網絡用戶可能採用訪問咱們的網站建設。

RWD採起徹底不一樣的方法：建立一個單一的網站，但該網站的識別和應對它的上下文。若是用戶有一個寬屏幕的桌面瀏覽器，例如，容許網站內容分佈在多個列。然而，在智能手機上從新排列的內容侷限於單個列。

在許多狀況下，這就是中止響應的設計 - 簡單的調整佈局和演示。若是這一切，但咱們認爲，咱們沒有履行響應式設計的目標，咱們賣咱們的用戶短。

真正響應用戶的狀況下，須要考慮各方面的經驗，設計一般包括圖像。對於現實生活中的例子，考慮一個網站如contfont.net。，單頁網站，有一個主要的形象和一組典型的HTML，樣式表，字體，和JavaScript文件。

該網站看起來很華麗的超高分辨率顯示器的電腦上，由於它包括一個高分辨率版本的主要圖像。交付該圖像文件不便宜，但其1940×1229像素使圖像壓縮後大小爲446 KB。

該網站能夠爲全部用戶使用相同的圖像文件，而不妥協的視覺體驗。較小的設備，如智能手機上的Web瀏覽器會調整它的大小以適合顯示。雖然這種作法會保持網站的視覺吸引力，總體用戶體驗將受到顯着。

在iPhone上，290×183像素的圖像大小爲18 KB到452 KB，1940×1229像素的圖像在MacBook Pro上看起來相同。

在iPhone上，290×183像素的圖像大小爲18 KB，452 KB，1940×1229像素的圖像在MacBook Pro上的大圖看起來相同。

用戶瀏覽網站上說，上一代的智能手機是什麼意思?對於用戶，290×183像素圖像的大小爲18 KB，看起來較大的版本相同。沒有一個負責任的形象的方法，該網站將強制用戶下載一個額外的429 KB的數據，徹底是浪費。這多餘的不只僅是學術上的，它具備重大影響網站的加載時間。智能手機用戶可能訪問的網站超過2 Mb / s的一個典型的3G鏈接。未能提供一個負責任的形象，增長了加載時間從1.3秒到3秒，明顯超過一倍!

原圖須要3.0秒來加載在3G網絡上，而1.3秒爲一個負責任的形象。大圖。

一個負責任的首要目標圖像的方法很簡單：只提供用戶的設備實際上可使用的像素。

識別用戶的上下文

若是咱們的網站去應對咱們的用戶的狀況下，咱們須要一種方法來標識這方面。今天，CSS提供最有效的方式來區分不一樣的設備。CSS爲咱們提供了兩個關鍵問題的答案：什麼是用戶的顯示器的大小?顯示支持視網膜式圖像?

CSS工具，爲咱們提供了這個信息是一個媒體查詢。媒體查詢定義一組CSS樣式屬性僅適用於具備特殊品質的設備。原本，媒體查詢是有限的媒體類型。其中盲人點字(盲文觸覺反饋裝置)，語音(語音合成)，TTY(設備等寬字體，如電傳打字機)和TV(電視類型的設備，例如CSS規範中定義了大量分辨率低和沒有滾動)。目前，只有兩種媒體類型，大多數瀏覽器都支持打印(印刷，分頁材料)和屏幕(電腦屏幕)。

擴大了使用CSS3媒體查詢，可是，經過讓樣式表來指定特定功能的設備以及媒體類型。的功能能夠包括在屏幕上的設備的狀況下，顯示的許多特徵，包括其寬度，方向，分辨率和像素比例。這些功能提供的信息，咱們須要選擇一個合適的響應圖像。

這裏媒體查詢如何能夠幫助咱們解決了上一節的窘境。做爲一個例子，一個15英寸的MacBook Pro有一個屏幕寬度爲1440像素(忽略的那一刻Retina顯示屏選項)。要肯定適用於屏幕大小(大)的樣式，咱們能夠寫咱們的樣式表：

@media only screen and (min-width: 1440px){
/* styles for MacBook Pro-sized screens and larger */
}

該塊中定義的樣式將只適用於當用戶訪問的網頁，使用的設備的屏幕大小爲1440像素。有一個問題，雖然。媒體屏幕尺寸並不適用於設備的硬件，而是適用於Web瀏覽器的視口。視口是在瀏覽器窗口的大小減去任何瀏覽器中的鉻，如工具欄。

除非用戶在全屏模式下瀏覽，瀏覽器窗口會略小於1440像素寬。所以，對於這種更常見的情形，咱們可能要重寫樣式表位。1200像素或許是比較現實的。

@media only screen and (min-width: 1200px){
/* styles for wide screens */
}

媒體查詢有兩部分。第一部分，只有屏幕，顯示樣式不該適用於頁面的印刷本或其餘非標設備。(惟一的關鍵字沒有實際影響的媒體查詢，它是有嚴格的真的老的瀏覽器不支持媒體功能，由於這些瀏覽器不理解惟一的語法，他們會簡單地忽略整個塊樣式。查詢，最小寬度：1200像素)的第二部分給出了屏幕的最小寬度的樣式將被應用。和鏈接這些部件是指申請樣式，都必須是真實的。

咱們可使用相似的技術來定義樣式人像模式的智能手機。

@media only screen and (max-width: 320px){
/* styles for narrow screens */
}

在這種狀況下，咱們能夠繼續前進，在查詢中使用的實際設備的屏幕尺寸。智能手機上的Web瀏覽器老是全屏寬度。

最小寬度和最大寬度功能規格，很容易肯定用戶的設備的寬度。不幸的是，識別Retina顯示屏是否是很簡單的。不一樣的瀏覽器使用不一樣的語法這個功能，所以咱們必須求助於廠商的前綴。爲了使事情稍微差一些，許多版本的Firefox中存在一個bug，在他們的語法，因此咱們須要同時使用固定和Mozilla瀏覽器中的一個「破」的語法。截至目前，視網膜品質顯示器看起來像下面推薦的查詢。

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {/* styles for Retina-type displays */
}

最終，瀏覽器都將支持標準的每像素點符號(DPPX)，並從咱們的樣式表，咱們能夠刪除供應商前綴。

CSS background-image屬性

若是CSS能夠可靠地識別用戶的狀況下，你可能會認爲它會很容易支持響應的圖像。彷佛是合乎邏輯的方法可能會是咱們不但願下載這些圖像設置顯示：無。下面是一個試圖嚴格基於屏幕尺寸。(咱們正在爲簡潔起見，省略視網膜考慮。)

只有屏幕和

<html lang="en">
<head>
<meta charset="utf-8">
<title>title> <style> img.smallscreen { display: none; } @media only screen and (max-width: 320px) { img { display: none; } img.smallscreen { display: inline; } } style> head> <body> <img src="largeimage.jpg">  body> html>

調整您的瀏覽器窗口的大小，直到圖像寬度看起來差使人沒法接受。該屏幕的寬度將是你的斷點。大圖。

當你找到的第一個斷點，使用圖形程序來建立一個新的測試圖像，大小從原來的源。新的測試圖像中找到下一個斷點，並重覆上述過程繼續下去，直到你已經達到了您的網站將支持的最大視區寬度。

在這一點上，你有你的圖像斷點和一組圖像匹配。Retina顯示屏，建立額外的雙分辨率的圖像。這裏是的完整列表圖像contfont.net網站：

您可使用此方法在您的網站上爲每一個圖像分開，沒有任何理由，全部的圖像都有使用相同的斷點。然而，若是你的網站有大量的圖片，它多是更有效地使用一些網站的圖片，發現一些常見的斷點，而後重複這些斷點的全部網站上的圖像。

克服的侷限性

在最簡單的狀況下，上述步驟都須要支持響應圖像。固然，網站不多是簡單的，而事實上，有幾個步驟，咱們能夠採起改善的辦法。

使圖像無障礙

標籤支持的ALT屬性，提供了一種替代方法，文本的形象描述。這種描述是很重要的，屏幕閱讀器的用戶訪問網站依靠的ALT含量來描述圖像。CSS背景圖像不的

標籤，所以沒有alt屬性，但咱們仍然可使他們視力受損的用戶訪問。要作到這一點，咱們添加了兩個額外的屬性，咱們的標記。

第一個額外的屬性，做用，讓屏幕的讀者都知道，的服務的做用一個標籤，即便它是不明確的標記。第二個屬性，詠歎調標籤供應ALT屬性中的

一樣的目的。有了這兩個增長，屏幕閱讀器能夠宣佈該元素是一個形象，他們將讀取該圖像替換文本說明您所提供給他們的用戶。

在瀏覽器中的縮放圖像

還有另一個有用的屬性的標籤，不支持咱們的簡單方法：由瀏覽器自動調整大小和縮放。隨着一個標準的

，咱們能夠簡單地設置包含元素的百分比寬度，瀏覽器會自動計算的寬度和比例尺度的高度。例如，考慮下面的代碼片斷顯示image.jpg的，具備自然的尺寸爲600×300像素的圖像文件。

瀏覽器會自動縮放圖像到含，減小其寬度從600至400像素。它還保留了圖像的縱橫比，在同一時間從300到200像素縮放圖像的高度。其結果是一個無失真的圖像，很是適合在頁面上。

第一格雷迪Kuhnline描述方法，咱們就能夠達到一樣的效果，一個現代瀏覽器的CSS背景圖像。(警告：本款介紹的方法不工做版本的Internet Explorer 8及如下，由於這些瀏覽器不支持必要的CSS屬性。)

最簡單的一部分，以解決正在擴大的寬度。與的

標籤，咱們能夠設置固定寬度內的咱們的元素，咱們只是必須明確地代表，背景應該填補這一HTML標記看起來沒有很大的不一樣。

咱們要結合幾個CSS屬性來設置的寬度，讓他們一次一個：

#images元素inline-block的設置顯示屬性。沒有這個屬性，CSS將做爲內嵌顯示的元素，咱們將沒法給它一個寬度或(在一分鐘內)的高度。

該元素的寬度設置爲100% ，因此咱們的形象的含有的的填充。字體大小和行高屬性設置爲0，這樣的跨度內的任何內容作沒有考慮到它的大小。

設置垂直對齊物業中間垂直居中的圖像元素，設置背景大小的屬性爲100%，因此咱們的形象充滿圖像元素。設置背景位置屬性50%50% ，在圖像元素的背景圖像對齊。設置背景重複屬性不重複，以防止瀏覽器從水平或垂直平鋪圖像。

由此產生的CSS樣式設置的圖像元素(元素的「形象」與ID)。

#image {

display: inline-block;

width: 100%;

font-size: 0;

line-height: 0;

vertical-align: middle;

background-size: 100%;

background-position: 50% 50%;

background-repeat: no-repeat;

background-image: url(image.jpg);

}

這些步驟使圖像的寬度照顧，但咱們尚未攻克的高度。在上面的標記或樣式告訴任何瀏覽器中的圖像元素的高度。所以，它會默認它的天然高度，唉，零，由於沒有實際內容的。幸運的是，咱們能夠解決這個問題有一些小的增長。

首先，咱們須要添加一個額外的元素對咱們的標記。這種額外的元件被放置於圖像元素。

如今咱們定義一些樣式屬性此內的。設置其顯示屬性塊，因此將有一個高度和寬度。其高度設置爲0，由於它不具備任何實際的內容。添加填充頂物業的形象的高度與寬度的比例等於指定百分比。

這最後一步是關鍵。即便繼承沒有從它的內容，填充頂力的元素佔用的垂直空間高度。此外，填充頂接受百分比值的百分比是相對於元素的寬度。咱們的形象是970×614像素，因此咱們使用的是百分比值(614÷970)×100%，63.3%。如今，瀏覽器將確保咱們的形象保持其縱橫比，由於它的放大或縮小。

如今一塊兒全部

要看到全部這些組件是如何結合在一塊兒的，這是咱們做爲一個例子的contfont.net網站的代碼。首先是主要包括網站形象的HTML標記。

樣式表定義的屬性，使圖像按比例增減。

.hero #cafe {
width:100%;
display: inline-block;
vertical-align: middle;
font:0/0 serif;
text-shadow: none;
color: transparent;
background-size:100%;
background-position:50%50%;
background-repeat: no-repeat;
}
.hero #cafe .inner {
padding-top:63.35%;/* height/width of image */
display: block;
height:0;
}

最後，媒體查詢了一套基於用戶的上下文中挑選適當的圖像文件。(下面的例子爲簡潔起見，省略了供應商的前綴)。

/* default screen, non-retina */
.hero #cafe {background-image:url("../img/candc970.jpg");}

@media only screen and (max-width: 320px){
/* Small screen, non-retina */
.hero #cafe {background-image:url("../img/candc290.jpg");}
}
@media only screen and (min-resolution: 2dppx) and (max-width: 320px) {
/* Small screen, retina */
.hero #cafe {background-image:url("../img/candc290@2x.jpg");}
}
@media only screen and (min-width: 321px) and (max-width: 538px){
/* Medium screen, non-retina */
.hero #cafe {background-image:url("../img/candc538.jpg");}
}
@media only screen and (min-resolution: 2dppx) and (min-width: 321px) and (max-width: 538px) {
/* Medium screen, retina */
.hero #cafe {background-image:url("../img/candc538@2x.jpg");}
}
@media only screen and (min-resolution: 2dppx) and (min-width: 539px) {
/* Large screen, retina */
.hero #cafe {background-image:url("../img/candc970@2x.jpg");}
}

潛在的問題

CSS背景圖像是一個方便的方式來提供響應的圖像，可是這種方法是不完美的。在一個基本的層面上，它違反了現代Web標準的基本理念之一 - 內容與表示分離。高級版本的作法也遭受瀏覽器的兼容性問題，以及方法不解決一些更深層次的問題，通常的響應圖像。

風格和內容的分離

+ CSS開發專門分開從內容風格。在現代網絡，HTML頁面提供了一個網站的全部內容，而樣式表隻影響外觀內容。不該該定義樣式表的內容自己。固然，風格和內容之間的分離已被違反有點與CSS的內容和內容後的屬性，但這些屬性一般用來加強的外觀(例如，經過添加一個圖標，一個元素)。

用CSS指定主網站的圖片，是一個徹底不一樣的水平。經過指定的主要內容，而不是HTML與CSS，使咱們的網站更難排除故障，使他們更難以維持，咱們建立系統障礙，可能會嘗試自動解析咱們的網站。

不幸的是，確實是有這個問題沒有獲得解決。若是嚴格分離的風格和內容對你很重要，那麼你就必須考慮以其餘方式響應圖像。

瀏覽器支持縮放圖像

如上所述，加入縮放圖像的基本方法的加強，咱們將沒法在Internet Explorer 8及如下工做。如srcset標準化的方法多是向後兼容的瀏覽器，可是，固然，自己srcset是否是當今任何主流瀏覽器上。

若是你須要支持IE8如今，你可能會考慮IE8中，指定固定圖像縮放圖像的大小，而不是建立一個單獨的樣式表。固然，你要包括該樣式表，使其餘瀏覽器IE條件註釋內不會看到它。

用戶上下文的實際問題

也許這種作法最根本的問題是一個問題，通常的響應圖像。咱們正在使用的屏幕的寬度和像素密度來肯定用戶的上下文，但目前尚不清楚，這樣的作法老是合適的。舉個例子，經過智能手機的Wi-Fi熱點的筆記本用戶訪問Web。

該用戶的Web瀏覽器將顯示全部特色，高密度，寬屏幕的設備，和一個負責任的網站將提供大尺寸，高清晰度的圖像。若是不這樣作會顯得可憐咱們的用戶的顯示屏上，但這些圖像可能要花很長的時間來加載過的無線網絡。他們能夠大大提升網站的加載時間，對他們的無線帳單，他們最終可能會花費咱們的用戶真正的金錢。若是能夠選擇，他們可能更喜歡較低分辨率的圖像。

事實證實，這個問題的解決是一個很艱難的一個聰明的人確定是在Web社區討論，但到目前爲止，不多有一個切實可行的解決方案上達成共識。如今，基於CSS的狀況下發現是最好的技術。

本文由紅蜘蛛網絡聯盟（www.rswebun.com）編譯，原文地址：http://mobile.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-backgrounds/