Web前端開發(fā)任務(wù)式教程（HTML5+CSS3）（微課版） 課件模塊6 元素背景

《Web前端開發(fā)任務(wù)式教程》

模塊6元素背景《Web前端開發(fā)任務(wù)式教程》元素背景背景是網(wǎng)頁非常重要的樣式，本模塊介紹元素的背景屬性，包括圖像背景、漸變背景、背景重復(fù)、背景尺寸，以及圖像精靈等屬性。任務(wù)6.1設(shè)計展板的詳情任務(wù)6.2優(yōu)化展板設(shè)計元素背景學習目標【知識目標】1）掌握圖像背景、漸變背景、圖像精靈屬性的用法。2）掌握opcity屬性的用法?！灸芰δ繕恕?）能夠使用圖像背景屬性設(shè)計網(wǎng)頁背景。2）能夠使用圖像精靈技術(shù)優(yōu)化網(wǎng)絡(luò)訪問效率?！禬eb前端開發(fā)任務(wù)式教程》本任務(wù)完善任務(wù)5.2，添加工匠詳細事跡展示，讓學習落到實處，有跡可循，有章可依。任務(wù)要求如下。1）小圖像圖標顯示4個工匠的索引。2）當鼠標懸停于圖標索引時，詳情顯示指定工匠的事跡和索引圖的大圖。3）詳情顯示區(qū)域使用漸變背景。設(shè)計完成的顯示效果如圖6-1所示，圖6-1a為初始顯示效果，圖6-1b為第2個工匠的詳情展示。元素背景任務(wù)6.1設(shè)計展板的詳情《Web前端開發(fā)任務(wù)式教程》元素背景《Web前端開發(fā)任務(wù)式教程》a)初始顯示效果b)顯示第2個工匠的詳情圖6-1展板詳情元素背景6.1.1圖像背景1.background-image屬性取url()函數(shù)值background-image屬性取不同的函數(shù)值能夠?qū)崿F(xiàn)不同的背景效果，當取值為url(URL)函數(shù)時，定義元素的圖像背景，參數(shù)URL規(guī)定圖像的路徑。2.opacity屬性opacity屬性設(shè)置元素的不透明度級別，屬性取值說明如表6-1所示。為綠色設(shè)置不同的不透明度值的效果如圖6-2所示，值為0.1的不透明度最小，顏色最淺。表6-1opacity屬性取值《Web前端開發(fā)任務(wù)式教程》圖6-2不透明度效果屬性值說明number設(shè)置不透明度值，取值從0.0（完全透明）到1.0（完全不透明）inherit從父元素繼承值元素背景【例6-1】使用背景顯示3幅圖像，并使用不透明度模糊圖像，網(wǎng)頁顯示效果如圖6-3所示?！禬eb前端開發(fā)任務(wù)式教程》與使用img元素顯示圖像不同，使用div元素結(jié)合背景屬性顯示圖像時，div元素的寬度和高度都必須設(shè)置。圖6-3具有不同透明度值的圖像元素背景6.1.2漸變背景漸變能夠?qū)崿F(xiàn)在兩個或多個指定顏色之間的平滑過渡，在背景設(shè)計中具有非常好的顯示效果，當background-image屬性取值為linear-gradient()漸變函數(shù)時，能夠?qū)崿F(xiàn)背景顏色的線性漸變。1.預(yù)定方向漸變顏色可以沿著預(yù)定的方向線性地發(fā)生變化，如圖6-4所示，從上到下，顏色由紅色逐步變化到黃色就是一種預(yù)定方向的線性漸變，方向還可以從左到右、沿對角方向等。當background-image屬性的取值為linear-gradient(direction,color-stop1,color-stop2,...)函數(shù)時，定義預(yù)定方向的漸變，函數(shù)參數(shù)說明如表6-2所示。【例6-2】編碼實現(xiàn)圖6-4所示的線性漸變效果。《Web前端開發(fā)任務(wù)式教程》參數(shù)說明direction規(guī)定漸變的方向，取值說明如下。tobottom：從上到下漸變，默認值。totop：從下到上漸變。toleft：從右到左漸變。toright：從左到右漸變。tobottomright：從左上到右下對角線方向漸變color-stop1，color-stop2,...顏色節(jié)點，可以定義不少于2個的顏色節(jié)點，會依次逐步過渡到指定的節(jié)點顏色圖6-4線性漸變表6-2linear-gradient(direction,color-stop1,color-stop2,...)函數(shù)參數(shù)元素背景2.任意角度漸變預(yù)定義方向的漸變是基于特殊角度值的顏色漸變，如果希望對漸變方向自由控制，可以用角度值取代預(yù)定義的方向定義線性漸變，角度值說明如圖6-5所示。從下到上（totop）的線性漸變對應(yīng)于0deg；從左到右（toright）的線性漸變對應(yīng)于90deg；從上到下（tobottom）的線性漸變對應(yīng)于180deg。當background-image屬性的取值為linear-gradient(angle,color-stop1,color-stop2,...)函數(shù)時，定義指定角度方向的線性漸變。函數(shù)參數(shù)說明如表6-3所示。表6-3linear-gradient(angle,color-stop1,color-stop2,...)函數(shù)參數(shù)《Web前端開發(fā)任務(wù)式教程》參數(shù)說明angle定義漸變方向的角度，是y軸和漸變線之間的夾角角度，如圖6-5所示，0deg創(chuàng)建一個從下到上的漸變，90deg將創(chuàng)建一個從左到右的漸變color-stop1，color-stop2,...顏色節(jié)點，可以定義不少于2個的顏色節(jié)點，會依次逐步過渡到指定的節(jié)點顏色圖6-5漸變角度值說明元素背景將例6-2的漸變代碼修改為基于角度的漸變代碼如下。background-image:linear-gradient(180deg,red,yellow);【例6-3】使用基于角度的漸變背景設(shè)計一個顯示效果如圖6-6所示的形狀。

圖6-6使用漸變和圓角邊框設(shè)計效果《Web前端開發(fā)任務(wù)式教程》元素背景6.1.3任務(wù)實現(xiàn)1.項目創(chuàng)建與資源準備新建HTML項目，在項目img目錄下準備名字分別為“程平.jpg”、“郭凱.jpg”、“馬小光.jpg”、“陳久友.jpg”的圖像素材。2.HTML內(nèi)容設(shè)計圖標用img元素顯示，詳情信息的文字介紹用p元素顯示，大圖像用div元素加背景顯示，整體嵌套在div元素里，方便布局設(shè)計。3.CSS樣式設(shè)計（1）設(shè)計圖像樣式：包括圖標和詳情圖的樣式，需要計算詳情大圖元素的寬度，根據(jù)頂部圖標列表計算出寬度的大概值為130（圖標寬度）*4+8*2（邊框?qū)挾龋?536px，進一步通過調(diào)試得到最終值544px，其余為基本樣式設(shè)計，按照常規(guī)美觀性要求直接設(shè)計即可。（2）設(shè)計文字樣式：基本樣式設(shè)計，按照常規(guī)美觀性要求直接設(shè)計即可（3）設(shè)計詳情的總體樣式：設(shè)置線性漸變背景《Web前端開發(fā)任務(wù)式教程》元素背景（4）設(shè)計當鼠標懸停于圖標時顯示效果的樣式鼠標懸停于頂部圖標時，顯示詳情中的文字和圖像，這里有2個技術(shù)點，分析如下。第1個技術(shù)點是如何根據(jù)元素之間的層次關(guān)系查找詳情中的對應(yīng)元素。首先繪制元素之間的層次關(guān)系如圖6-7所示。《Web前端開發(fā)任務(wù)式教程》由元素層次關(guān)系可見，詳情的容器元素div.content是頂部圖標元素img的同胞，通過同胞選擇器（img~div.content）查找，詳情的文字元素p.detail和圖像元素div.img是容器元素div.content的子元素，通過子元素選擇器（div.content>p.detail、div.content>.img）查找。通過偽類選擇器定位元素的位置和獲取元素的指定狀態(tài)，從而查找到指定的元素。通過第1個圖標元素查找第1個文字元素的選擇器為img:nth-child(1)~div.content>p.detail:nth-child(1)，增加鼠標懸停于圖標的狀態(tài)限定，選擇器為img:nth-child(1):hover~div.content>p.detail:nth-child(1)。去掉元素名，直接使用類選擇器，簡化選擇器的書寫，結(jié)果為img:nth-child(1):hover~.content>.detail:nth-child(1)第2個技術(shù)點是背景圖像的切換與文字的隱藏與顯示，分別使用background-image屬性和display屬性，需要分別查找元素和動態(tài)切換樣式。圖6-7元素的層次關(guān)系元素背景（5）設(shè)計整體水平居中顯示的樣式：整體是有關(guān)圖像和文字的顯示，使用div元素的文字對齊即可。4.項目運行測試（1）內(nèi)容測試編寫完HTML內(nèi)容代碼后保存網(wǎng)頁，查看內(nèi)容顯示是否完整和正確。（2）按步驟測試樣式依據(jù)樣式設(shè)計的步驟分步驟保存網(wǎng)頁，觀察樣式的設(shè)計效果，掌握元素屬性的用法?！禬eb前端開發(fā)任務(wù)式教程》元素背景在任務(wù)5.2中，圖像都是單幅的，每一幅圖像都要單獨進行網(wǎng)絡(luò)請求加載，效率低下，容易引起網(wǎng)絡(luò)堵塞。本任務(wù)將圖像進行組合，由4幅大小相同的小圖拼接成1個尺寸為520*266px的圖像，如圖6-8所示?；谄唇拥膱D像資源優(yōu)化任務(wù)5.2的實現(xiàn)，完成的網(wǎng)頁顯示效果同任務(wù)5.2，參見圖5-12所示，但是網(wǎng)頁加載效率更高?！禬eb前端開發(fā)任務(wù)式教程》圖6-8圖像資源6.2優(yōu)化展板設(shè)計圖5-12大國工匠事跡展元素背景6.2.1圖像背景相關(guān)的屬性1.background-repeat屬性默認情況下，背景圖像在水平和垂直兩個方向上進行重復(fù)，以填滿整個背景區(qū)域。但是，背景圖像有時候并不需要重復(fù)，或者僅需要在一個方向上重復(fù)，就需要使用background-repeat屬性來定義圖像背景的重復(fù)方式，屬性取值說明如表6-4所示。表6-4background-repeat屬性取值《Web前端開發(fā)任務(wù)式教程》屬性值說明repeat默認值，背景圖像在水平和垂直2個方向重復(fù)repeat-x背景圖像在水平方向重復(fù)repeat-y背景圖像在垂直方向重復(fù)no-repeat背景圖像不重復(fù)，僅顯示一次元素背景2.background-size屬性background-size屬性定義背景圖像的尺寸，屬性取值說明如表6-5所示。表6-5background-size屬性取值《Web前端開發(fā)任務(wù)式教程》屬性值說明length設(shè)置背景圖像的寬度和高度，第1個值設(shè)置寬度，第2個值設(shè)置高度。如果只設(shè)置1個值，則第2個值會被設(shè)置為“auto”，背景圖像的高度值參考寬度值等比例拉伸percentage以父元素的百分比來設(shè)置背景圖像的寬度和高度，設(shè)置順序同length值cover拉伸背景圖像，使其能夠完全覆蓋背景區(qū)域，不考慮背景圖像的裁剪contain按比例拉伸背景圖像，使其在某一個方向達到背景區(qū)域的最大尺寸。與cover值不同，另一方向有可能不能覆蓋背景區(qū)域元素背景6.2.2background屬性background屬性在一個聲明中設(shè)置所有的背景屬性，允許僅設(shè)置部分屬性值，對屬性值的設(shè)置順序沒有特別的要求，習慣上先設(shè)置顏色屬性值，然后設(shè)置圖像屬性值，以及與圖像背景相關(guān)的其他屬性值。【例6-4】編碼為元素設(shè)置圖像背景，并設(shè)置不同的不透明度，不同的重復(fù)值和不同的尺寸值，保存網(wǎng)頁，體驗背景屬性的用法?！禬eb前端開發(fā)任務(wù)式教程》圖6-9背景屬性設(shè)置由顯示效果可見，第1個元素默認圖像背景水平和垂直重復(fù)，填滿了整個元素；第2個元素僅垂直方向重復(fù)了背景；第3個元素沒有重復(fù)，僅顯示了1幅實際大小的背景圖像；第4個元素沒有重復(fù)，設(shè)置了背景寬度，背景圖像的高度自動進行了等比例縮放；第5個元素設(shè)置背景尺寸值為contain，水平方向覆蓋以后垂直方向自動進行了等比例縮放；第6個元素背景尺寸值為cover，背景被拉伸填充了元素。背景作用于由元素內(nèi)容和內(nèi)邊距所組成的區(qū)域，圖像背景的優(yōu)先級高于顏色背景。元素背景6.2.3圖像精靈1.background-position屬性元素背景默認鋪在元素邊框內(nèi)，從元素左上角內(nèi)邊距起點開始填充元素的內(nèi)邊距和內(nèi)容空間。background-position屬性能夠設(shè)置元素背景的起點位置，設(shè)置后背景將從指定的起點位置開始填充元素，落在元素邊框和邊框之外的背景將會被剪切不顯示。屬性取值說明如表6-6所示。表6-6background-position屬性取值background-position屬性取值正負不限，正值表示背景起點從元素內(nèi)邊距左上角開始向內(nèi)偏移的距離，負值表示背景起點從元素內(nèi)邊距左上角開始向外偏移的距離?！禬eb前端開發(fā)任務(wù)式教程》屬性值說明ykeyxkey關(guān)鍵詞值，第1個是垂直位置，可以取top、center、bottom，第2個是水平位置，可以取left、center、right。如果只規(guī)定了1個關(guān)鍵詞，那么第2個值將是“center”。默認值為0%0%x%y%百分比（%）值，第1個值規(guī)定水平位置，第2個值規(guī)定垂直位置。左上角是0%0%，右下角是100%100%。如果只規(guī)定了一個值，另一個值將是50%xposypos位置（position）值，第1個值是水平位置，第2個值是垂直位置。左上角是00，單位是像素(0px0px)或任何其他的CSS單位。如果只規(guī)定了一個值，另一個值將是50%。可以混合使用%和position值元素背景【例6-5】已知一幅圖像如圖6-10所示，將該圖設(shè)置為元素的背景，且不允許重復(fù)，設(shè)置不同的背景起點位置，實現(xiàn)如圖6-11所示的顯示效果?！禬eb前端開發(fā)任務(wù)式教程》圖6-10圖像資源圖6-11使用background-position屬性元素背景2.生成圖像精靈網(wǎng)頁每次加載圖像都需要訪問服務(wù)器，加載多張圖像就需要多次請求服務(wù)器，降低了網(wǎng)絡(luò)訪問的效率。如果多張圖像都不是很大，就可以將其組合在一起，生成一個圖像的集合，一次性加載到網(wǎng)頁中，顯示時根據(jù)需要對圖像區(qū)域進行篩選，減少網(wǎng)絡(luò)請求的次數(shù)，提高網(wǎng)頁的加載效率。由若干張小圖像組合在一起生成的圖像集合稱為圖像精靈。使用圖像精靈能夠提高網(wǎng)頁的加載效率，但是需要計算圖像的像素，而且需要使用圖像處理技術(shù)將多張圖像合并到一張圖像中，會帶來額外的工作量。此外，由于圖像精靈基于圖像的像素，在自適應(yīng)網(wǎng)頁設(shè)計中也會帶來一些布局的困惑，因此，應(yīng)根據(jù)需要謹慎使用。由例6-5可見，可以通過設(shè)置元素的寬高確定圖像背景的顯示尺寸，通過設(shè)置背景的起點確定圖像背景的顯示起點，二者結(jié)合能夠篩選顯示圖像區(qū)域，在元素中僅顯示指定區(qū)域的圖像，實現(xiàn)圖像精靈區(qū)域的篩選?！禬eb前端開發(fā)任務(wù)式教程》元素背景【例6-6】使用背景屬性篩選圖像精靈的區(qū)域，將圖6-10