2023學(xué)年完整公開課版CSS背景屬性_第1頁
2023學(xué)年完整公開課版CSS背景屬性_第2頁
2023學(xué)年完整公開課版CSS背景屬性_第3頁
2023學(xué)年完整公開課版CSS背景屬性_第4頁
2023學(xué)年完整公開課版CSS背景屬性_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費(fèi)閱讀

付費(fèi)下載

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

——CSS背景屬性移動(dòng)商務(wù)系統(tǒng)前端設(shè)計(jì)基本屬性1CSS3新增背景屬性2多背景3漸變背景4目錄Contents目錄1基本屬性基本屬性基本屬性背景的相關(guān)屬性是用于控制元素背景色、背景圖片等，同時(shí)可以設(shè)置背景圖片的排列方式。背景的基本屬性主要用于定義背景的色彩、圖片、重復(fù)方式等基本內(nèi)容。基本屬性background-colorbackground-color屬性用于設(shè)置元素的背景顏色。它的默認(rèn)值取值為none，允許下面的任何內(nèi)容顯示出來。background-color屬性和color屬性一樣支持多種顏色格式?；緦傩詁ackground-imagebackground-image屬性可以為元素指定背景圖像。如果圖像包括透明區(qū)域，下面的內(nèi)容將會(huì)顯示出來。為防止這一點(diǎn)，網(wǎng)頁設(shè)計(jì)者通常將background-image屬性和background-color屬性一起使用。背景顏色顯示在背景圖像下面，提供了不透明的背景。background-image屬性需要一個(gè)URL來選擇作為背景的相應(yīng)圖像。用作背景圖像的圖片類型可以為瀏覽器支持的任何格式，通常為GIF、JPG和PNG格式。基本屬性background-repeatbackground-repeat屬性決定當(dāng)背景圖像比元素的空間小時(shí)將如何排列。該屬性的默認(rèn)值為repeat，這將讓圖像在水平和垂直兩個(gè)方向上平鋪。當(dāng)該屬性取值為repeat-x時(shí)，背景圖像將僅在水平上平鋪。當(dāng)該屬性取值為repeat-y時(shí)，背景圖像將僅在垂直方向上平鋪。當(dāng)該屬性取值為no-repeat時(shí)，背景圖像將不會(huì)平鋪。基本屬性background-attachmentbackground-attachment屬性決定背景圖像在元素的內(nèi)容進(jìn)行相應(yīng)滾動(dòng)時(shí)是應(yīng)該滾動(dòng)還是應(yīng)該停留在屏幕的一個(gè)固定位置。這個(gè)屬性的默認(rèn)值取值為scroll。當(dāng)取值為fixed時(shí)，可實(shí)現(xiàn)水印效果，這和<body>元素的專有屬性bgproperties（由Microsoft引入）相似?；緦傩詁ackground-positionbackground-position屬性指定背景圖像，在元素的畫布空間中的定位方式。有三種方法指定位置：為圖像的左上角指定一個(gè)絕對距離，通常以像素為單位。可以使用水平和垂直方向的百分比來指定位置?？梢允褂藐P(guān)鍵字來描述水平和垂直方向的位置。水平方向上的關(guān)鍵字為left、center和right。垂直方向上的關(guān)鍵字為top、center和bottom。在使用關(guān)鍵字時(shí)，未指明的方向上默認(rèn)的取值為center?；緦傩曰緦傩詁ackground-position具體語法如下：注意：如果僅僅設(shè)置了一個(gè)關(guān)鍵字，那么第二個(gè)關(guān)鍵字將取默認(rèn)值center。因此，在上面的例子中，關(guān)鍵字center只需用一次即可。基本屬性backgroundbackground屬性用于全面設(shè)置背景樣式。該屬性是一個(gè)復(fù)合屬性，可用于同時(shí)設(shè)置背景色、背景圖片、背景重復(fù)模式等。為更好地控制背景，一般不建議通過該屬性來控制背景。具體語法如下：2CSS3新增背景屬性CSS3新增背景屬性CSS3新增背景屬性CSS3新增的背景屬性：CSS3新增背景屬性background-clip在HTML頁面中，具有背景的元素通常有元素內(nèi)容、內(nèi)部補(bǔ)白（padding）、邊框、外部補(bǔ)白（margin）四部分組成。元素背景的顯示范圍在CSS2與CSS2.1、CSS3中并不相同。在CSS2中，背景的顯示范圍是指內(nèi)部補(bǔ)白之內(nèi)的范圍，不包括邊框。在CSS2.1和CSS3中，背景的顯示范圍是指包括邊框在內(nèi)的范圍。在CSS3中，也可以使用background-clip來修飾背景的顯示范圍。如果將background-clip的屬性值設(shè)定為border，則背景范圍包括邊框區(qū)域，如果設(shè)定為padding，則不包括邊框區(qū)域。CSS3新增背景屬性現(xiàn)場演示：案例11-01：兩種background-clip屬性值的對比CSS3新增背景屬性background-origin在繪制背景圖像時(shí)，默認(rèn)是從內(nèi)部區(qū)域（padding）的左上角開始，但是可以利用background-origin屬性來指定繪制時(shí)從邊框的左上角開始，或者從內(nèi)容的左上角開始。在Firefox瀏覽器中指定繪制起點(diǎn)時(shí)，需要在樣式代碼中將background-origin屬性書寫成“-moz-background-origin”的形式；在Safari瀏覽器或者Chrome瀏覽器中指定繪制起點(diǎn)時(shí)，需要在樣式代碼中將background-origin屬性寫成“-webkit-background-origin”的形式。CSS3新增背景屬性現(xiàn)場演示：案例11-02：background-origin屬性CSS3新增背景屬性background-size在CSS3中，可以使用background-size屬性來指定背景圖像的尺寸。使用background-size屬性來指定背景圖像尺寸的最簡單的方法類似如下所示：其中，40px為背景圖像的寬度，20px為背景圖像的高度，中間用半角空格進(jìn)行分隔。如果要維持圖像比例的話，可以設(shè)定圖像寬度與高度的同時(shí)，將另一個(gè)參數(shù)設(shè)定為“auto”。CSS3新增背景屬性現(xiàn)場演示：案例11-03：background-size屬性3多背景多背景多背景CSS3多背景語法及參數(shù)CSS3多背景語法和CSS中背景語法其實(shí)沒有本質(zhì)上的區(qū)別，只是在CSS3中可以給多個(gè)背景圖像設(shè)置相同或者不相同的background-（position||repeat||clip||size||origin||attachment）屬性。在CSS3多背景中，相鄰背景之間必須使用逗號分隔開。多背景CSS3多背景語法及參數(shù)具體語法如下：可以把上面的縮寫拆解成以下形式：多背景現(xiàn)場演示：案例11-04：多背景屬性使用4漸變背景漸變背景漸變背景CSS3多背景的優(yōu)勢使設(shè)計(jì)師部分?jǐn)[脫了對AdobePhotoshop等繪圖工具的依賴。具有CSS3多背景的層次之分。可單獨(dú)指定背景圖像中某個(gè)圖像的平鋪方式、圖像的大小以及位置。可圖片合成，代碼易于維護(hù)。漸變背景線性漸變漸變是通過背景設(shè)置的，所以必須使用background或background-image屬性。具體語法如下：linear-gradient（）函數(shù)的屬性規(guī)定了創(chuàng)建漸變效果的開始位置與顏色。第一個(gè)值可以是像素值、百分比或使用關(guān)鍵字top、bottom、l

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論