輕松學(xué)HTML+CSS之圖片.pptx

1、第4章 圖片,網(wǎng)頁(yè)中的圖片具有直觀和美化的作用，是網(wǎng)頁(yè)設(shè)計(jì)中必不可少的元素。它既是文字表達(dá)的有力補(bǔ)充，又是網(wǎng)頁(yè)美化裝飾中最具渲染力的元素。這一章我們將講解如何在網(wǎng)頁(yè)中插入圖片，美化圖片等內(nèi)容，從而使網(wǎng)頁(yè)豐富多彩更顯生動(dòng)，進(jìn)而激發(fā)出瀏覽者的興趣。,4.1 網(wǎng)頁(yè)圖片格式,圖片的格式有很多。但常見(jiàn)的網(wǎng)頁(yè)圖片格式只有三種：GIF、JPG、PNG。下面詳細(xì)講解圖片的這三種格式。 1.GIF格式：GIF格式的文件后綴名是.gif。 2.JPG格式：JPG格式的文件后綴名是.jpg。 3.PNG格式：PNG格式的文件后綴名是.png。,4.2 圖片的構(gòu)建,在HTML中，圖片由標(biāo)簽定義。是空標(biāo)簽，它只包含屬性

2、，并且沒(méi)有閉合標(biāo)簽。下面我們就來(lái)講解如何在網(wǎng)頁(yè)中嵌入圖片。,4.2.1 選擇路徑（src）,為了在頁(yè)面上顯示圖片，我們需要使用源屬性src。src指“source”（來(lái)源）的縮寫(xiě)。源屬性的值是圖片的URL地址。定義圖片的語(yǔ)法是：,4.2.2 設(shè)定低分辨率（lowsrc）,如果用戶的瀏覽器速度很慢，網(wǎng)頁(yè)設(shè)計(jì)者可以在頁(yè)面中為其插入一張低分辨率的圖像以供顯示。src和lowsrc定義的圖片并不能共存，當(dāng)src定義的圖片不顯示時(shí)，才會(huì)顯示lowsrc定義的圖片。定義語(yǔ)法如下：,4.2.3 設(shè)定替換文本（alt）,alt屬性用來(lái)為圖片定義一串預(yù)備的可替換的文本。替換文本屬性的值是用戶定義的。定義語(yǔ)法如下

3、：,4.3 調(diào)整圖片,在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中，可以自行定義圖片的高度和寬度，排列位置等，使得圖片為整個(gè)網(wǎng)頁(yè)添加效果。下面我們就來(lái)詳細(xì)如何對(duì)圖片進(jìn)行調(diào)整。,4.3.1 選擇寬度和高度,為了在網(wǎng)頁(yè)中能夠更好的顯示圖片，我們常常設(shè)定圖片的寬度和高度。定義語(yǔ)法如下：,4.3.2 設(shè)定排列（align）,圖片和文字之間的排列通過(guò)align屬性來(lái)設(shè)定。圖片的絕對(duì)對(duì)齊方式和相對(duì)文字對(duì)齊方式是不一樣的。絕對(duì)對(duì)齊文字的效果和文字的對(duì)齊一樣，只有三種：居左、居中、居右；而相對(duì)文字對(duì)齊方式是指圖片與一行文字的相對(duì)位置對(duì)齊。定義語(yǔ)法如下：,4.3.2 設(shè)定排列（align,以下描述的是空間位置，這里使用圖形和文字作為參考。

4、 “基線” 、“底部” 、“絕對(duì)底部” 效果相同，是指圖片底端和文字的底端對(duì)齊。 “頂端” 、“文本上方”方式是指圖片頂端和文字行最高字符的頂端對(duì)齊。 “中間” 方式是指圖片的中間線和文字的底端對(duì)齊。 “絕對(duì)中間”是指圖片的中間線和文字的中間線對(duì)齊。,4.3.2 設(shè)定排列（align,其中，圖片的頂端、中間、底端的位置如圖4.4所示。 文字的頂端、中間、底端的位置如圖4.5所示。,4.3.3 設(shè)定邊框（border）,默認(rèn)的圖片是沒(méi)有邊框的，通過(guò)屬性可以為圖片添加邊框線。我們可以設(shè)置邊框線的寬度，但邊框的顏色是不可以調(diào)整。當(dāng)圖片上沒(méi)有添加鏈接的時(shí)候，邊框的顏色為黑色；當(dāng)圖片添加了鏈接時(shí)，邊框的

5、顏色和鏈接文字的顏色一致，默認(rèn)為深藍(lán)色。定義語(yǔ)法如下：,4.3.4 設(shè)定水平間距和垂直間距,圖像和文字之間的距離是可以調(diào)整的，使用屬性hspace調(diào)整圖像和文字之間的左右距離，屬性vspace調(diào)整圖像和文字之間的上下距離。這樣可以非常有效地避免了網(wǎng)頁(yè)上文字圖像擁擠的排版。其單位默認(rèn)為像素。定義語(yǔ)法如下：,4.4 網(wǎng)頁(yè)背景圖片,在網(wǎng)頁(yè)制作過(guò)程中，背景的設(shè)置多種多樣，可以用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。要把圖片放入背景，有兩種方式設(shè)置，下面我們分別來(lái)介紹在HTML中和CSS中的設(shè)置方式。,4.4.1 為網(wǎng)頁(yè)背景添加圖片,背景圖片指的是在網(wǎng)頁(yè)背景中插入圖片。我們可以根據(jù)自身要求

6、進(jìn)行定義，下面我們就來(lái)介紹如何為網(wǎng)頁(yè)背景添加圖片。 1.在HTML中，我們使用background屬性，對(duì)背景圖片進(jìn)行設(shè)置。定義語(yǔ)法如下：,為網(wǎng)頁(yè)背景添加圖片,2.在CSS中，我們通常使用background-image屬性。background-image屬性的默認(rèn)值是none，表示背景上沒(méi)有放置任何圖像。如果需要設(shè)置一個(gè)背景圖像，必須為這個(gè)屬性設(shè)置一個(gè)URL值，定義語(yǔ)法如下：,4.4.2 指定背景圖片應(yīng)用的范圍,背景圖片的應(yīng)用范圍非常廣。不僅可以用于body中對(duì)整個(gè)網(wǎng)頁(yè)背景進(jìn)行定義，還可以對(duì)網(wǎng)頁(yè)內(nèi)部元素進(jìn)行定義，如段落背景等。下面我們就來(lái)詳細(xì)介紹背景圖片的應(yīng)用范圍。 1.段落背景圖片的應(yīng)用

7、 2.行內(nèi)元素背景圖片的應(yīng)用,4.4.3 指定圖片平鋪方式,如果需要在頁(yè)面上對(duì)背景圖片進(jìn)行平鋪，可以使用background-repeat屬性。屬性值repeat導(dǎo)致圖片在水平垂直方向上都平鋪，與以往背景圖片的通常做法一樣。repeat-x和repeat-y分別導(dǎo)致圖片只在水平或垂直方向上重復(fù)，no-repeat則不允許圖片在任何方向上平鋪。定義語(yǔ)法規(guī)則如下：,4.4.4 為背景圖片定位,background-position屬性來(lái)改變圖片在背景中的位置。定義語(yǔ)法規(guī)則如下：,為background-position屬性提供值,為background-position屬性提供值有很多方法。首先，

8、可以使用一些關(guān)鍵字：top、bottom、left、right和center。下面逐一進(jìn)行介紹。 1.定位關(guān)鍵字：位置關(guān)鍵字可以按任何順序出現(xiàn)，只要保證不超過(guò)兩個(gè)關(guān)鍵字一個(gè)對(duì)應(yīng)水平方向，另一個(gè)對(duì)應(yīng)垂直方向。,2.百分?jǐn)?shù)值：百分?jǐn)?shù)值的表現(xiàn)方式更為復(fù)雜，定義語(yǔ)法規(guī)則如下： 3.長(zhǎng)度值：長(zhǎng)度值是從元素內(nèi)邊距區(qū)左上角的偏移。偏移點(diǎn)是圖片的左上角。定義語(yǔ)法規(guī)則如下：,4.4.5 設(shè)置背景圖片跟隨方式,如果文檔比較長(zhǎng)，那么當(dāng)文檔向下滾動(dòng)時(shí)，背景圖片也會(huì)隨之滾動(dòng)。當(dāng)文檔滾動(dòng)到超過(guò)圖片的位置時(shí)，圖片就會(huì)消失。而background-attachment屬性就是防止這種滾動(dòng)的。通過(guò)這個(gè)屬性，可以調(diào)節(jié)圖片相對(duì)于可視區(qū)是固定的（fixe