第7章用CSS設(shè)置圖像和圓角

1、第第7 7章章 用用CSSCSS設(shè)置圖像和圓角設(shè)置圖像和圓角 本章簡介：本章簡介： 圖片是網(wǎng)頁中不可缺少的內(nèi)容，它圖片是網(wǎng)頁中不可缺少的內(nèi)容，它能使頁面更加豐富多彩，能讓人更直觀能使頁面更加豐富多彩，能讓人更直觀地感受網(wǎng)頁所要傳達(dá)給瀏覽者的信息。地感受網(wǎng)頁所要傳達(dá)給瀏覽者的信息。本節(jié)詳細(xì)介紹本節(jié)詳細(xì)介紹CSSCSS設(shè)置圖片風(fēng)格樣式的方設(shè)置圖片風(fēng)格樣式的方法，包括圖片的邊框、對(duì)齊方式和圖文法，包括圖片的邊框、對(duì)齊方式和圖文混排等，并通過實(shí)例綜合講解文字和圖混排等，并通過實(shí)例綜合講解文字和圖片的各種運(yùn)用。片的各種運(yùn)用。使用使用CSSCSS可以方便地使用各種手段可以方便地使用各種手段把頁面靈活地分為

2、多個(gè)部分。但是簡單把頁面靈活地分為多個(gè)部分。但是簡單分割出來的都是矩形方框，設(shè)置背景顏分割出來的都是矩形方框，設(shè)置背景顏色和邊框的顏色，產(chǎn)生的都只能是單調(diào)色和邊框的顏色，產(chǎn)生的都只能是單調(diào)的矩形方框。而在網(wǎng)頁中，經(jīng)常需要用的矩形方框。而在網(wǎng)頁中，經(jīng)常需要用到圓角的設(shè)計(jì)。到圓角的設(shè)計(jì)。 用用CSS設(shè)置圖像樣式設(shè)置圖像樣式7.1用用CSS設(shè)置背景樣式設(shè)置背景樣式7.2設(shè)置圓角效果設(shè)置圓角效果7.37.1用CSS設(shè)置圖像樣式圖片不僅能夠增加網(wǎng)頁的吸引力，同時(shí)也大大地提升了用戶圖片不僅能夠增加網(wǎng)頁的吸引力，同時(shí)也大大地提升了用戶瀏覽網(wǎng)頁的體驗(yàn)。圖片的展示形式豐富多樣，不同形式的圖片展現(xiàn)瀏覽網(wǎng)頁的體驗(yàn)。

3、圖片的展示形式豐富多樣，不同形式的圖片展現(xiàn)也讓瀏覽網(wǎng)頁的樂趣變得更加多樣化。也讓瀏覽網(wǎng)頁的樂趣變得更加多樣化。作為單獨(dú)的圖片本身，它的很多屬性可以直接在作為單獨(dú)的圖片本身，它的很多屬性可以直接在HTMLHTML中進(jìn)行中進(jìn)行調(diào)整，但是通過調(diào)整，但是通過CSSCSS統(tǒng)一管理，不但可以更加精確地調(diào)整圖片的各統(tǒng)一管理，不但可以更加精確地調(diào)整圖片的各種屬性，還可以實(shí)現(xiàn)很多特殊的效果。首先講解用種屬性，還可以實(shí)現(xiàn)很多特殊的效果。首先講解用CSSCSS設(shè)置圖片基設(shè)置圖片基本屬性的方法，為進(jìn)一步深入探討打下基礎(chǔ)。本屬性的方法，為進(jìn)一步深入探討打下基礎(chǔ)。7.1.1設(shè)置圖片邊框在在HTMLHTML中可以直接通過中

4、可以直接通過標(biāo)記的標(biāo)記的borderborder屬性值為圖片添加屬性值為圖片添加邊框，屬性值為邊框的粗細(xì)，以像素為單位，從而控制邊框的粗細(xì)。邊框，屬性值為邊框的粗細(xì)，以像素為單位，從而控制邊框的粗細(xì)。當(dāng)設(shè)置該值為當(dāng)設(shè)置該值為0 0時(shí)，則顯示為沒有邊框。時(shí)，則顯示為沒有邊框。1基本屬性基本屬性2為不同的邊框分別設(shè)置樣式為不同的邊框分別設(shè)置樣式7.1.2設(shè)置多色邊框在上述的案例中，使用在上述的案例中，使用borde-colorborde-color屬性為圖像添加邊框色，屬性為圖像添加邊框色，不過添加的都是單一顏色值。不過添加的都是單一顏色值。CSS 3CSS 3增強(qiáng)了該屬性的功能，使它可增強(qiáng)了該屬

5、性的功能，使它可以為邊框添加更多的顏色，從而方便設(shè)計(jì)者設(shè)計(jì)漸變等絢麗的邊框以為邊框添加更多的顏色，從而方便設(shè)計(jì)者設(shè)計(jì)漸變等絢麗的邊框效果。效果。border-colorborder-color屬性可以設(shè)置很多不同的值，從而對(duì)列邊框?qū)傩钥梢栽O(shè)置很多不同的值，從而對(duì)列邊框設(shè)置不同的樣式。設(shè)置不同的樣式。邊框漸變色顯示邊框立體效果7.1.3設(shè)置邊框背景在在CSS 3CSS 3之前，如果要添加圖像邊框，元素的長或?qū)捠请S時(shí)可之前，如果要添加圖像邊框，元素的長或?qū)捠请S時(shí)可變的，用戶通常采用的做法是讓元素的每條邊單獨(dú)使用一幅圖像文變的，用戶通常采用的做法是讓元素的每條邊單獨(dú)使用一幅圖像文件，但是這種做法也有

6、缺點(diǎn)：一方面是比較麻煩；另一方面是頁面件，但是這種做法也有缺點(diǎn)：一方面是比較麻煩；另一方面是頁面上使用的元素比較多。上使用的元素比較多。針對(duì)這種情況，針對(duì)這種情況，CSS 3CSS 3中增加了一個(gè)中增加了一個(gè)border-imageborder-image屬性，可以屬性，可以讓處于隨時(shí)變化狀態(tài)的元素的長或?qū)挼倪吙蚪y(tǒng)一使用一個(gè)圖像文件讓處于隨時(shí)變化狀態(tài)的元素的長或?qū)挼倪吙蚪y(tǒng)一使用一個(gè)圖像文件來繪制。來繪制。邊框背景圖像在Google Chrome瀏覽器中預(yù)覽7.1.4設(shè)置各種邊框效果使用使用border-imageborder-image屬性，制作對(duì)角圓角效果。屬性，制作對(duì)角圓角效果。圓角邊框素

7、材對(duì)角圓角7.1.4設(shè)置各種邊框效果使用使用border-imageborder-image屬性，制作對(duì)角圓角效果。屬性，制作對(duì)角圓角效果。圓角邊框素材對(duì)角圓角邊框背景圖像下方兩個(gè)角為圓角效果7.1.4設(shè)置各種邊框效果邊框背景圖像下方兩個(gè)角為圓角效果7.1.4設(shè)置各種邊框效果邊框背景圖像下方兩個(gè)角為圓角效果使用邊框圖像也可以制作出陰影的效果，和前面相同，在制使用邊框圖像也可以制作出陰影的效果，和前面相同，在制作之前，要先制作出帶有陰影效果的圖像。作之前，要先制作出帶有陰影效果的圖像。7.1.4設(shè)置各種邊框效果邊框背景圖像圓角效果的選項(xiàng)卡我們?cè)跒g覽網(wǎng)頁時(shí)，會(huì)經(jīng)常發(fā)現(xiàn)一些圓角效果的選項(xiàng)卡，這我們?cè)?/p>

8、瀏覽網(wǎng)頁時(shí)，會(huì)經(jīng)常發(fā)現(xiàn)一些圓角效果的選項(xiàng)卡，這些選項(xiàng)卡如何制作呢？現(xiàn)在就比較方便了，可以使用邊框圖像屬性些選項(xiàng)卡如何制作呢？現(xiàn)在就比較方便了，可以使用邊框圖像屬性來進(jìn)行制作，和前面相同在制作之前，想制作一個(gè)圓角圖像。來進(jìn)行制作，和前面相同在制作之前，想制作一個(gè)圓角圖像。7.1.5圖片縮放CSSCSS控制圖片的大小與控制圖片的大小與HTMLHTML一樣，也是通過一樣，也是通過widthwidth和和heightheight兩兩個(gè)屬性來實(shí)現(xiàn)的。所不同的是個(gè)屬性來實(shí)現(xiàn)的。所不同的是CSSCSS中可以使用更多的值，如上一章中可以使用更多的值，如上一章中中“文字大小文字大小”一節(jié)提到的相對(duì)值和絕對(duì)值等。

9、一節(jié)提到的相對(duì)值和絕對(duì)值等。7.1.6圖文混排WordWord中文字與圖片有很多排版的方式，在網(wǎng)頁中同樣可以通中文字與圖片有很多排版的方式，在網(wǎng)頁中同樣可以通過過CSSCSS設(shè)置實(shí)現(xiàn)各種圖文混排的效果。本節(jié)介紹設(shè)置實(shí)現(xiàn)各種圖文混排的效果。本節(jié)介紹CSSCSS圖文混排的具圖文混排的具體方法。體方法。1文字環(huán)繞文字環(huán)繞2設(shè)置圖片與文字的間距設(shè)置圖片與文字的間距圖片與文字的距離7.1.7制作八大行星科普網(wǎng)頁實(shí)例本節(jié)通過具體實(shí)例，進(jìn)一步講解圖文混排方法的使用，并把本節(jié)通過具體實(shí)例，進(jìn)一步講解圖文混排方法的使用，并把該方法運(yùn)用到實(shí)際的網(wǎng)站制作中。本例以介紹太陽系的八大行星為該方法運(yùn)用到實(shí)際的網(wǎng)站制作中。

10、本例以介紹太陽系的八大行星為題材，充分利用題材，充分利用CSSCSS圖文混排的方法，實(shí)現(xiàn)頁面效果。圖文混排的方法，實(shí)現(xiàn)頁面效果。八大行星頁面7.1.8設(shè)置圖片與文字的對(duì)齊方式當(dāng)圖片與文字同時(shí)出現(xiàn)在頁面上的時(shí)候，圖片的對(duì)齊方式就當(dāng)圖片與文字同時(shí)出現(xiàn)在頁面上的時(shí)候，圖片的對(duì)齊方式就顯得很重要了。如何能夠合理地將圖片對(duì)齊到理想的位置，成為頁顯得很重要了。如何能夠合理地將圖片對(duì)齊到理想的位置，成為頁面是否整體協(xié)調(diào)、統(tǒng)一的重要因素。面是否整體協(xié)調(diào)、統(tǒng)一的重要因素。1橫向?qū)R方式橫向?qū)R方式2縱向?qū)R方式縱向?qū)R方式水平對(duì)齊圖像與文字中間對(duì)齊7.2用CSS設(shè)置背景樣式本節(jié)首先要介紹顏色的多種設(shè)置方法，之后

11、介紹如何設(shè)置網(wǎng)本節(jié)首先要介紹顏色的多種設(shè)置方法，之后介紹如何設(shè)置網(wǎng)頁和文字的背景顏色，以及多種背景圖片樣式的設(shè)置方法。頁和文字的背景顏色，以及多種背景圖片樣式的設(shè)置方法。7.2.1設(shè)置背景顏色在在HTMLHTML中，設(shè)置網(wǎng)頁的背景顏色利用的是中，設(shè)置網(wǎng)頁的背景顏色利用的是標(biāo)記中的標(biāo)記中的bgcolorbgcolor屬性，而在屬性，而在CSSCSS中不但可以設(shè)置網(wǎng)頁的背景顏色，還可以設(shè)置文字的背景中不但可以設(shè)置網(wǎng)頁的背景顏色，還可以設(shè)置文字的背景顏色。顏色。在在CSSCSS中，網(wǎng)頁元素的背景顏色使用中，網(wǎng)頁元素的背景顏色使用background-colorbackground-color屬性來設(shè)

12、置，屬性來設(shè)置，屬性值為某種顏色。顏色值的表示方法和前面介紹的文字顏色設(shè)置方法屬性值為某種顏色。顏色值的表示方法和前面介紹的文字顏色設(shè)置方法相同。相同。網(wǎng)頁的初始效果設(shè)置標(biāo)題“綠底白字”效果7.2.2設(shè)置背景圖像背景不僅可以設(shè)置為某種顏色，背景不僅可以設(shè)置為某種顏色，CSSCSS中還可以用圖像作為網(wǎng)頁元素中還可以用圖像作為網(wǎng)頁元素的背景，而且用途極為廣泛。的背景，而且用途極為廣泛。設(shè)置背景圖像，使用設(shè)置背景圖像，使用background-imagebackground-image屬性實(shí)現(xiàn)。屬性實(shí)現(xiàn)。準(zhǔn)備一個(gè)背景圖像文件頁面的body元素設(shè)置了背景圖像后的效果7.2.3設(shè)置背景圖像平鋪在默認(rèn)情況

13、下，圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪。如果不希在默認(rèn)情況下，圖像會(huì)自動(dòng)向水平和豎直兩個(gè)方向平鋪。如果不希望平鋪，或者只希望沿著一個(gè)方向平鋪，可以使用望平鋪，或者只希望沿著一個(gè)方向平鋪，可以使用background-repeatbackground-repeat屬性來控制。屬性來控制。漸變色構(gòu)成的背景圖像同時(shí)設(shè)置背景圖像和背景顏色7.2.4設(shè)置多重背景圖像backgroundbackground是是CSSCSS中使用最多一種屬性。為了設(shè)計(jì)師能夠靈活地設(shè)中使用最多一種屬性。為了設(shè)計(jì)師能夠靈活地設(shè)計(jì)網(wǎng)頁效果，計(jì)網(wǎng)頁效果，CSS 3CSS 3增強(qiáng)了該屬性的功能，允許在同一元素內(nèi)疊加多個(gè)背增強(qiáng)了該屬性

14、的功能，允許在同一元素內(nèi)疊加多個(gè)背景圖像。景圖像。backgroundbackground屬性可以設(shè)置很多不同的值，從而對(duì)背景圖像設(shè)置屬性可以設(shè)置很多不同的值，從而對(duì)背景圖像設(shè)置不同的樣式。不同的樣式。拼合圖像素材多背景拼合效果7.2.5設(shè)置背景圖像位置通過通過background-position屬性設(shè)置背景圖像的具體位置屬性設(shè)置背景圖像的具體位置。將背景圖像放在左上角用百分比設(shè)置背景圖像的位置7.2.6固定背景圖片位置在網(wǎng)頁上設(shè)置背景圖片時(shí)，隨著滾動(dòng)條的移動(dòng)，背景圖片也會(huì)跟著在網(wǎng)頁上設(shè)置背景圖片時(shí)，隨著滾動(dòng)條的移動(dòng)，背景圖片也會(huì)跟著一起移動(dòng)一起移動(dòng)。使用使用CSSCSS的的backgrou

15、nd-attachmentbackground-attachment屬性可以把背景圖像設(shè)置成固定屬性可以把背景圖像設(shè)置成固定不變的效果，使背景圖像固定，而不跟隨網(wǎng)頁內(nèi)容一起滾動(dòng)。不變的效果，使背景圖像固定，而不跟隨網(wǎng)頁內(nèi)容一起滾動(dòng)。背景圖像會(huì)隨頁面一起移動(dòng)將背景圖像固定在瀏覽器窗口中7.2.7設(shè)置背景圖像坐標(biāo)原點(diǎn)background-origin屬性定義屬性定義background-position屬性的參考位屬性的參考位置。在默認(rèn)情況下，置。在默認(rèn)情況下，background- position屬性總是以元素的左上角坐屬性總是以元素的左上角坐標(biāo)原點(diǎn)進(jìn)行背景圖像定位。使用標(biāo)原點(diǎn)進(jìn)行背景圖像定位

16、。使用background-origin屬性可以改變這種屬性可以改變這種定位方式。定位方式。設(shè)置背景圖像坐標(biāo)以邊框開始7.2.8設(shè)置背景圖像的大小在在CSS 2.0及以前的版本中，圖像大小是不可以控制的，如果想要及以前的版本中，圖像大小是不可以控制的，如果想要使背景圖像填充元素的背景區(qū)域，則需要事先設(shè)計(jì)更大的背景圖像，否使背景圖像填充元素的背景區(qū)域，則需要事先設(shè)計(jì)更大的背景圖像，否則背景圖像只能按照平鋪的方法進(jìn)行填充。則背景圖像只能按照平鋪的方法進(jìn)行填充。CSS 3新增了新增了background-size屬性，該屬性可以控制背景圖像的大小。屬性，該屬性可以控制背景圖像的大小。沒有控制大小之前

17、控制大小之后的效果7.2.9設(shè)置標(biāo)題的圖像替換使用背景圖像的方式替換標(biāo)題。使用背景圖像的方式替換標(biāo)題。制作一個(gè)標(biāo)題背景圖像圖像替換的最終效果7.3設(shè)置圓角效果在網(wǎng)頁設(shè)計(jì)中，通常需要把網(wǎng)頁分為若干個(gè)部分，這正是在網(wǎng)頁設(shè)計(jì)中，通常需要把網(wǎng)頁分為若干個(gè)部分，這正是CSS的強(qiáng)的強(qiáng)項(xiàng)。使用項(xiàng)。使用CSS可以方便地使用各種手段把頁面靈活地分為多個(gè)部分。但可以方便地使用各種手段把頁面靈活地分為多個(gè)部分。但是簡單分割出來的都是矩形方框，設(shè)置背景顏色和邊框的顏色，產(chǎn)生的是簡單分割出來的都是矩形方框，設(shè)置背景顏色和邊框的顏色，產(chǎn)生的都只能是單調(diào)的矩形方框。而在網(wǎng)頁中，經(jīng)常需要用到圓角的設(shè)計(jì)。本都只能是單調(diào)的矩形方

18、框。而在網(wǎng)頁中，經(jīng)常需要用到圓角的設(shè)計(jì)。本章專門對(duì)圓角的設(shè)計(jì)進(jìn)行介紹。章專門對(duì)圓角的設(shè)計(jì)進(jìn)行介紹。7.3.1圓角屬性在在CSS 3之前，如果要用圓角效果，需要圖像文件才能達(dá)到。在之前，如果要用圓角效果，需要圖像文件才能達(dá)到。在CSS 3中可以使用中可以使用border-radius屬性就可以實(shí)現(xiàn)圓角效果。屬性就可以實(shí)現(xiàn)圓角效果。7.3.2圓角實(shí)例div height:120px; border:10px solid #C0C; -moz-border-radius:20px; /*兼容兼容Gecko引擎引擎*/ -webkir-border-radius:20px; /*兼容兼容Webkit引擎引擎*/ border-radius:20px ; /*兼容標(biāo)準(zhǔn)引擎兼容標(biāo)準(zhǔn)引擎*/元素四角均為圓角7.3.3圓角實(shí)例使用使用border-radius屬性可以設(shè)置容器邊角效果。屬性可以設(shè)置容器邊角效果。不同屬性值的效果7.3.3圓角實(shí)例不同屬性值的效果小結(jié)本章介紹了圖像邊框和圖文混排以及背景圖像的設(shè)置。本章中需要本章介紹