第五章盒子模型PPT課件

1、第五章 盒子模型 HTML5盒子模型的相關(guān)屬性漸變屬性盒子模型概述 背景屬性 HTML5 5 5.4 .4CSS3漸變屬性5 5.1 .1盒子模型概述5 5.3 .3背景屬性目錄5 5.2 .2盒子模型相關(guān)屬性5 5.5 .5制作音樂排行榜 5.3 背景屬性1 12 2設(shè)置背景圖像設(shè)置背景圖像知識引入背景與圖片不透明度的設(shè)置背景與圖片不透明度的設(shè)置4 45 53 36 67 78 8設(shè)置背景顏色設(shè)置背景顏色設(shè)置背景圖像平鋪設(shè)置背景圖像平鋪設(shè)置背景圖像的位置設(shè)置背景圖像的位置設(shè)置背景圖像固定設(shè)置背景圖像固定設(shè)置背景圖像的大小設(shè)置背景圖像的大小設(shè)置背景的顯示區(qū)域設(shè)置背景的顯示區(qū)域9 9101011

2、11設(shè)置背景設(shè)置背景圖像圖像的剪裁區(qū)域的剪裁區(qū)域設(shè)置多重背景圖像設(shè)置多重背景圖像背景復(fù)合屬性背景復(fù)合屬性 5.3 知識點講解在CSS中，使用background-color屬性來設(shè)置網(wǎng)頁元素的背景顏色，其屬性值與文本顏色的取值一樣，可使用預(yù)定義的顏色值、十六進(jìn)制#RRGGBB或RGB代碼rgb(r,g,b)。background-color的默認(rèn)值為transparent，即背景透明，此時子元素會顯示其父元素的背景。1、 設(shè)置背景顏色設(shè)置背景顏色 背景不僅可以設(shè)置為某種顏色，還可以將圖像作為元素的背景。在CSS中通過background-image屬性設(shè)置背景圖像。2、 設(shè)置背景圖像設(shè)置背景圖

3、像5.3 知識點講解 （1）RGBA模式模式RGBA是CSS3新增的顏色模式，它是RGB顏色模式的延伸，該模式是在紅、綠、藍(lán)三原色的基礎(chǔ)上添加了不透明度參數(shù)。其語法格式如下：3、 背景與圖片不透明度的設(shè)置背景與圖片不透明度的設(shè)置rgba(r,g,b,alpha);5.3 知識點講解 （2）opacity屬性屬性在CSS3中，使用opacity屬性能夠使任何元素呈現(xiàn)出透明效果。其語法格式如下：3、 背景與圖片不透明度的設(shè)置背景與圖片不透明度的設(shè)置opacity：opacityValue;5.3 知識點講解 默認(rèn)情況下，背景圖像會自動沿著水平和豎直兩個方向平鋪，如果不希望圖像平鋪，或者只沿著一個方

4、向平鋪，可以通過background-repeat屬性來控制，該屬性的取值如下：repeat：沿水平和豎直兩個方向平鋪（默認(rèn)值）no-repeat：不平鋪（圖像位于元素的左上角，只顯示一個）repeat-x：只沿水平方向平鋪repeat-y：只沿豎直方向平鋪4、 設(shè)置背景圖像平鋪設(shè)置背景圖像平鋪5.3 知識點講解 如果將背景圖像的平鋪屬性background-repeat定義為no-repeat，圖像將默認(rèn)以元素的左上角為基準(zhǔn)點顯示。5、 設(shè)置背景圖像的位置設(shè)置背景圖像的位置5.3 知識點講解 如果希望背景圖像固定在屏幕的某一位置，不隨著滾動條移動，可以使用background-attachm

5、ent屬性來設(shè)置。background-attachment屬性有兩個屬性值，分別代表不同的含義，具體解釋如下：scroll：圖像隨頁面元素一起滾動（默認(rèn)值）fixed：圖像固定在屏幕上，不隨頁面元素滾動。6、 設(shè)置背景圖像固定設(shè)置背景圖像固定5.3 知識點講解 在CSS3中，background-size屬性用于控制背景圖像的大小，其基本語法格式如下：具體解釋如下表所示。7、 設(shè)置背景圖像的大小設(shè)置背景圖像的大小background-size:屬性值1 屬性值2;屬性值說 明像素值設(shè)置背景圖像的高度和寬度。第一個值設(shè)置寬度，第二個值設(shè)置高度。如果只設(shè)置一個值，則第二個值會默認(rèn)為auto；百分

6、比以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個值設(shè)置寬度，第二個值設(shè)置高度。如果只設(shè)置一個值，則第二個值會默認(rèn)為auto；cover把背景圖像擴展至足夠大，使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中；contain把圖像擴展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域；5.3 知識點講解 在默認(rèn)情況下，background-position屬性總是以元素左上角為坐標(biāo)原點定位背景圖像，運用CSS3中的background-origin 屬性可以改變這種定位方式，自行定義背景圖像的相對位置，其基本語法格式如下：在上面的語法格式中，background-orig

7、in 屬性有三種取值，分別表示不同的含義，具體解釋如下。padding-box：背景圖像相對于內(nèi)邊距區(qū)域來定位。border-box：背景圖像相對于邊框來定位。content-box：背景圖像相對于內(nèi)容框來定位。8、 設(shè)置背景的顯示區(qū)域設(shè)置背景的顯示區(qū)域background-origin:屬性值;5.3 知識點講解 在CSS樣式中，background-clip屬性用于定義背景圖像的裁剪區(qū)域，其基本語法格式如下：在語法格式上，background-clip屬性和background-origin 屬性的取值相似，但含義不同，具體解釋如下。border-box：默認(rèn)值，從邊框區(qū)域向外裁剪背景。p

8、adding-box：從內(nèi)邊距區(qū)域向外裁剪背景。content-box：從內(nèi)容區(qū)域向外裁剪背景。9、 設(shè)置背景圖像的剪裁區(qū)域設(shè)置背景圖像的剪裁區(qū)域background-clip:屬性值;5.3 知識點講解 CSS3中增強了背景圖像的功能，允許一個容器里顯示多個背景圖像，使背景圖像效果更容易控制。但是CSS3中并沒有為實現(xiàn)多背景圖片提供對應(yīng)的屬性，而是通過background-image、background-repeat、background-position和background-size等屬性提供多個屬性值來實現(xiàn)多重背景圖像效果，各屬性值之間用逗號隔開。10、 設(shè)置多重背景圖像設(shè)置多重背景

9、圖像5.3 知識點講解 同邊框?qū)傩砸粯?，在CSS中背景屬性也是一個復(fù)合屬性，可以將背景相關(guān)的樣式都綜合定義在一個復(fù)合屬性background中。使用background屬性綜合設(shè)置背景樣式的語法格式如下：11、 背景復(fù)合屬性背景復(fù)合屬性background:background-color background-image background-repeat background-attachment background-position background-size background-clip background-origin;5.3 知識點講解 多學(xué)多學(xué)一招一招：使用背景圖像屬性定義列表：使用背景圖像屬性