網(wǎng)頁設(shè)計(jì)第14次課CSS顏色及背景屬性

1、第三章 使用CSS樣式表（上）第2節(jié)、顏色及背景屬性2、顏色及背景屬性（1）顏色屬性）顏色屬性 color：color屬性用來設(shè)置指定元素的顏色，顏色值表示方法有三種：顏色名關(guān)鍵字 / 16進(jìn)制的RGB值 / rgb(R,G,B)。 語法，color : red / #FF0000 / rgb(255,0,0)顏色關(guān)鍵字十六進(jìn)制RGB（0-255）RGB（0%-100%） 黑色 black#000000rgb（0,0,0）rgb（0%,0%,0%） 紅色 red#FF0000rgb（255,0,0）rgb（100%,0%,0%） 綠色 green#008000rgb（0, 128, 0）rgb

2、（0%,50%,0%） 藍(lán)色 blue#0000FFrgb（0,0,255） rgb（0%,0%,100%） 黃色 yellow#FFFF00rgb（255,255,0） rgb（100%,100%,0%） 青色 cyan#00FFFFrgb（0,255,255）rgb（0%,100%,100%） 紫紅 fuchsia#FF00FFrgb（255,0,255） rgb（100%,0%,100%） 銀色 silver#C0C0C0rgb（192,192,192）rgb（75%,75%,75%） 白色 white#FFFFFFrgb（255,255,255） rgb（100%,100%,100%）

3、 淺綠 lime#00FF00rgb（0,255,0） rgb（0%,100%,0%） 茶色 maroon#800000rgb（128, 0, 0）rgb（50%,0%,0%） 深藍(lán) navy#000080rgb（0, 0, 128 ） rgb（0%,0%,50%） 橄欖 olive#808000rgb（128, 128, 0 ） rgb（50%,50%,0%） 紫色 purple#800080rgb（128, 0, 128 ） rgb（50%,0%,50%） 灰色 gray#808080rgb（128, 128, 128 ） rgb（50%,50%,50%） 墨綠 teal#008080rg

4、b（0, 128, 128）rgb（0%,50%,50%）whitetealolive常用顏色值對(duì)照表（2）背景顏色）背景顏色 background-color：在HTML中，利用標(biāo)記中的bgcolor屬性可以設(shè)置網(wǎng)頁的背景顏色，而在CSS中使用background-color屬性不但可以設(shè)置網(wǎng)頁的背景顏色，還可以設(shè)置文字段落的背景顏色。 語法，background-color : 顏色值學(xué)完就練之2-1（請(qǐng)將源代碼復(fù)制到頁面中，開始練習(xí)）：奔跑吧兄弟口頭禪（默認(rèn)）鄧超：weare 伐木累?。t字藍(lán)底）鄧超：whatare you 弄啥呢？（藍(lán)字紅底） 陳赫：你是豬嗎?。t字藍(lán)底）李晨：我們打

5、一架吧！（藍(lán)字紅底）王寶強(qiáng)：不要被女人迷惑了，她們都是“紅顏禍水“?。t字） 王祖藍(lán)：我撿漏王不是浪得虛名的！（藍(lán)底） 王祖藍(lán)：讓我撕一次，就一次！（藍(lán)字） baby：boom shaka laka（紅底）（3）背景圖片）背景圖片 background-image：使用background-image屬性可以設(shè)置元素的背景圖像。圖像地址可以是絕對(duì)地址，也可以是相對(duì)地址。 語法，background-image : url（圖像地址）（4）背景圖片重復(fù)）背景圖片重復(fù) background-repeat：使用background-repeat屬性可以設(shè)置背景圖像是否平鋪，并且可以設(shè)置如何平鋪。 取

6、值有：【no-repeat表示背景圖像不平鋪；repeat表不背景圖像平鋪排滿整個(gè)網(wǎng)頁；repeat-x表示背圖像只在水平方向上平鋪；repeat-y表示背景圖像只在垂直方向上平鋪?！空Z法，background-repeat : no-repeat / repeat / repeat-x / repeat-y;（5）背景圖片位置）背景圖片位置 background-position：背景位置屬性用于設(shè)置背景圖像的位置，這個(gè)屬性只能應(yīng)用于塊級(jí)元素（如p、div等）和替換元素（如：img、input、textarea、selcet和object等）。取值包括兩種，一種是采用數(shù)字，另一種是關(guān)鍵字描述

7、。語法，background-position: 位置取值1 位置取值2 background-positionbackground-position屬性的位置設(shè)置值屬性的位置設(shè)置值設(shè)置值設(shè)置值說明說明X（數(shù)值）設(shè)置圖片在網(wǎng)頁中的橫向位置，單位可以是所有尺度單位Y（數(shù)值）設(shè)置圖片在網(wǎng)頁中的縱向位置，單位可以是所有尺度單位 background-positionbackground-position屬性的百分比設(shè)置值屬性的百分比設(shè)置值設(shè)置值（設(shè)置值（X Y）說明說明圖形演示圖形演示0% 0%左上位置50% 0%靠上居中位置100% 0%右上位置0% 50%靠左居中位置50% 50%正中位置100

8、% 50%靠右居中位置0% 100%左下位置50% 100%靠下居中位置100% 100%右下位置 background-positionbackground-position屬性的關(guān)鍵字設(shè)置值屬性的關(guān)鍵字設(shè)置值設(shè)置值（設(shè)置值（X Y）說明說明圖形演示圖形演示top left左上位置top center靠上居中位置top right右上位置left center靠左居中位置center center正中位置right center靠右居中位置bottom left左下位置bottom center靠下居中位置bottom right右下位置50*50學(xué)完就練之2-2（請(qǐng)將源代碼復(fù)制到頁面中，開

9、始練習(xí)）： （6）背景圖片滾動(dòng)視差效果）背景圖片滾動(dòng)視差效果 background-attachment：使用background-attachment可以設(shè)置背景圖像是隨對(duì)象滾動(dòng)還是固定不動(dòng)?！緎croll表示背景圖像隨對(duì)象滾動(dòng)而滾動(dòng)，是默認(rèn)選項(xiàng)；flxed表示背景圖像固定在頁面上不動(dòng)，只有其他的內(nèi)容隨滾動(dòng)條滾動(dòng)】語法，background-attachment: scroll / fixed當(dāng)background-attachment的值為flxed時(shí)，表示背景圖像固定在頁面上不動(dòng)，只有其他的內(nèi)容隨滾動(dòng)條滾動(dòng)。當(dāng)background-attachment的值為scroll時(shí)，表示背景圖像隨

10、對(duì)象滾動(dòng)而滾動(dòng)（7）背景復(fù)合屬性）背景復(fù)合屬性 background：使用背景復(fù)合屬性background可以簡化CSS代碼。取值范圍可以包括【背景顏色、背景圖像、背景重復(fù)、背景滾動(dòng)視差和背景位置】，各值之間用空格相連。語法，background: red url(bg.png) norepeat fixed top right二、顏色和背景屬性總結(jié)序號(hào)屬性名含義舉例1color顏色屬性 color:red;2background-color背景顏色 background-color:red;3background-image背景圖片 background-image: url(bg.png)

11、 4background-repeat背景圖片重復(fù)background-repeat:no-repeat 5background-position背景圖片位置background-position: left top;6background-attachment背景圖片滾動(dòng)視差效果background-attachment:fixed7 background背景復(fù)合屬性 background: red url(bg.png) norepeat fixed top right;華麗的分割線任務(wù) 3任務(wù)名稱：CSS顏色及背景屬性1右下角彈窗任務(wù)要求：建立一個(gè)文件夾，用于放置網(wǎng)頁和素材文件，使用學(xué)習(xí)過的CSS技術(shù)設(shè)計(jì)出一個(gè)如效果圖中顯示的網(wǎng)頁。文件夾命名為：“任務(wù)3 *的顏色及背