第11章+css顏色和背景

1、CS第11章 css顏色和背景田兵軟件工程系WEB DESIGNSC目錄目錄11.111.3WEB DESIGNSC1背景色背景色v背景色背景色 可以使用 background-color 屬性為元素設(shè)置背景色。 這個(gè)屬性接受任何合法的顏色值。v這條規(guī)則把元素的背景設(shè)置為灰色：這條規(guī)則把元素的背景設(shè)置為灰色： p background-color: gray;v如果您希望背景色從元素中的文本向外少有延伸，只需如果您希望背景色從元素中的文本向外少有延伸，只需增加一些內(nèi)邊距：增加一些內(nèi)邊距： p background-color: gray; padding: 20px;WEB DESIGNSCv

2、可以為所有元素設(shè)置背景色，這包括可以為所有元素設(shè)置背景色，這包括 body 一直到一直到 em 和和 a 等行內(nèi)元素。等行內(nèi)元素。 background-color 不能繼承，其默認(rèn)值是 transparent。transparent 有“透明”之意。 也就是說(shuō)，如果一個(gè)元素沒(méi)有指定背景色，那么背景就是透明的，這樣其祖先元素的背景才能可見(jiàn)。WEB DESIGNSCv 實(shí)例實(shí)例1:為元素設(shè)置背景顏色為元素設(shè)置背景顏色 body background-color: yellow h1 background-color: #00ff00 h2 background-color: transparen

3、t p background-color: rgb(250,0,255) p.no2 background-color: gray; padding: 20px; 這是標(biāo)題 1 這是標(biāo)題 2 這是段落 這個(gè)段落設(shè)置了內(nèi)邊距。 WEB DESIGNSCv 實(shí)例實(shí)例2:設(shè)置部分文本的背景顏色設(shè)置部分文本的背景顏色 span.highlight background-color:yellow 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文

4、本。 WEB DESIGNSC2背景圖像背景圖像vbackground-image 屬性為元素設(shè)置背景圖像。屬性為元素設(shè)置背景圖像。 元素的背景占據(jù)了元素的全部尺寸，包括內(nèi)邊距和邊框，但不包括外邊距。 默認(rèn)地，背景圖像位于元素的左上角，并在水平和垂直方向上重復(fù)。v實(shí)例實(shí)例body background-image: url(bgimage.gif); background-color: #000000; v提示：提示： 請(qǐng)?jiān)O(shè)置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁(yè)面也可獲得良好的視覺(jué)效果。WEB DESIGNSCv將圖像設(shè)置為背景將圖像設(shè)置為背景 body background-

5、image:url(/i/eg_bg_04.gif); WEB DESIGNSC3背景重復(fù)背景重復(fù)v背景重復(fù)背景重復(fù) 如果需要在頁(yè)面上對(duì)背景圖像進(jìn)行平鋪，可以使用 background-repeat 屬性。vrepeat-x 和和 repeat-y 分別導(dǎo)致圖像只在水平或垂分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)，直方向上重復(fù)，no-repeat 則不允許圖像在任何方向則不允許圖像在任何方向上平鋪。上平鋪。v默認(rèn)地，背景圖像將從一個(gè)元素的左上角開(kāi)始。請(qǐng)看下默認(rèn)地，背景圖像將從一個(gè)元素的左上角開(kāi)始。請(qǐng)看下面的例子：面的例子： body background-image: url(/i/eg_bg_0

6、3.gif); background-repeat: repeat-y; WEB DESIGNSCbody background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-yWEB DESIGNSC4背景關(guān)聯(lián)背景關(guān)聯(lián)v 如果文檔比較長(zhǎng)，那么當(dāng)文檔向下滾動(dòng)時(shí)，背景圖像如果文檔比較長(zhǎng)，那么當(dāng)文檔向下滾動(dòng)時(shí)，背景圖像也會(huì)隨之滾動(dòng)。當(dāng)文檔滾動(dòng)到超過(guò)圖像的位置時(shí)，圖也會(huì)隨之滾動(dòng)。當(dāng)文檔滾動(dòng)到超過(guò)圖像的位置時(shí)，圖像就會(huì)消失。像就會(huì)消失。v 您可以通過(guò)您可以通過(guò) background-attachment 屬性防止屬性防止這種滾動(dòng)。通過(guò)這個(gè)屬

7、性，可以聲明圖像相對(duì)于可視這種滾動(dòng)。通過(guò)這個(gè)屬性，可以聲明圖像相對(duì)于可視區(qū)是固定的（區(qū)是固定的（fixed），因此不會(huì)受到滾動(dòng)的影響：），因此不會(huì)受到滾動(dòng)的影響：body background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed WEB DESIGNSCv background-position 屬性屬性 background-position 屬性設(shè)置背景圖像的起始位置。 這個(gè)屬性設(shè)置背景原圖像（由 background-image 定義）的位置，背景圖像如果

8、要重復(fù)，將從這一點(diǎn)開(kāi)始。 提示： 您需要把 background-attachment 屬性設(shè)置為 fixed，才能保證該屬性在 Firefox 和 Opera 中正常工作。v 設(shè)置背景圖像的起始位置。設(shè)置背景圖像的起始位置。v 定位背景圖像：定位背景圖像：body background-image:url(bgimage.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:center; WEB DESIGNSCbackground-position 屬性設(shè)置屬性設(shè)置 值值描述

9、描述top left top center top right center left center center center right bottom left bottom center bottom right如果您僅規(guī)定了一個(gè)關(guān)鍵詞，那么第二個(gè)值將是center。默認(rèn)值：0% 0%。x% y%第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您僅規(guī)定了一個(gè)值，另一個(gè)值將是 50%。xpos ypos第一個(gè)值是水平位置，第二個(gè)值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。如果您僅規(guī)定了一個(gè)值，另

10、一個(gè)值將是50%。您可以混合使用 % 和 position 值。WEB DESIGNSCbackground-origin 屬性vbackground-origin 屬性規(guī)定 background-position 屬性相對(duì)于什么位置來(lái)定位。v注釋：注釋： 如果背景圖像的如果背景圖像的 background-attachment 屬性為屬性為 “fixed”，則該屬性沒(méi)有效果。則該屬性沒(méi)有效果。v語(yǔ)法語(yǔ)法 background-origin: padding-box|border-box|content-box; vpadding-box背景圖像相對(duì)于內(nèi)邊距框來(lái)定位。背景圖像相對(duì)于內(nèi)邊距框來(lái)定

11、位。vborder-box背景圖像相對(duì)于邊框盒來(lái)定位。背景圖像相對(duì)于邊框盒來(lái)定位。vcontent-box背景圖像相對(duì)于內(nèi)容框來(lái)定位背景圖像相對(duì)于內(nèi)容框來(lái)定位WEB DESIGNSC實(shí)例：相對(duì)于內(nèi)容框來(lái)定位背景圖像：實(shí)例：相對(duì)于內(nèi)容框來(lái)定位背景圖像：vvvv vdivvvborder:1px solid black;vpadding:35px;vbackground-image:url(/i/bg_flower.gif);vbackground-repeat:no-repeat;vbackground-position:left;vv#div1vvbackground-origin:borde

12、r-box;vv#div2vvbackground-origin:content-box;vvvvvbackground-origin:border-box:vv這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本

13、。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。vvbackground-origin:content-box:vv這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。

14、這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。vvvWEB DESIGNSCbackground-size 屬性vbackground-size 屬性規(guī)定背景圖像的尺寸。屬性規(guī)

15、定背景圖像的尺寸。v語(yǔ)法：vbackground-size: length|percentage|cover|contain; 1.length設(shè)置背景圖像的高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 “auto”。2.percentage以父元素的百分比來(lái)設(shè)置背景圖像的寬度和高度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 “auto”。3.cover把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中。4.contain把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適

16、應(yīng)內(nèi)容區(qū)域。v實(shí)例：規(guī)定背景圖像的尺寸：實(shí)例：規(guī)定背景圖像的尺寸：div background:url(img_flwr.gif); background-size:80px 60px; background-repeat:no-repeat; WEB DESIGNSCv實(shí)例：拉伸背景圖像來(lái)完全覆蓋內(nèi)容區(qū)域。實(shí)例：拉伸背景圖像來(lái)完全覆蓋內(nèi)容區(qū)域。 divbackground:url(/i/bg_flower.gif);background-size:35% 100%;-moz-background-size:35% 100%; /* 老版本的 Firefox */background-repe

17、at:no-repeat;這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。這是一個(gè)段落。WEB DESIGNSCbackground-clip 屬性v background-clip 屬性規(guī)定背景的繪制區(qū)域。IE9+、Firefox、Opera、Chrome 以及以及 Safari 支持支持 background-clip 屬性。屬性。注釋：Internet Explorer 8 以及更早的版本不支持以及更早的版本不支持 background-clip 屬性。屬性。v 語(yǔ)法 background-clip: border-box|

18、padding-box|content-box; 1. border-box背景被裁剪到邊框盒。背景被裁剪到邊框盒。2. padding-box背景被裁剪到內(nèi)邊距框。背景被裁剪到內(nèi)邊距框。3. content-box背景被裁剪到內(nèi)容框。背景被裁剪到內(nèi)容框。v 實(shí)例：規(guī)定背景的繪制區(qū)域：規(guī)定背景的繪制區(qū)域：div background-color:yellow; background-clip:content-box; WEB DESIGNSCv實(shí)例：規(guī)定背景的繪制區(qū)域：實(shí)例：規(guī)定背景的繪制區(qū)域： divwidth:300px;height:300px;padding:50px;backgrou

19、nd-color:yellow;background-clip:content-box;border:2px solid #92b901;這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這是文本。這

20、是文本。這是文本。WEB DESIGNSCbackground 屬性v background 屬性可以 簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有的背景屬性。 所有瀏覽器都支持所有瀏覽器都支持 background 屬性。屬性。 注釋：IE8 以及更早的瀏覽器不支持一個(gè)元素多個(gè)背景圖像。以及更早的瀏覽器不支持一個(gè)元素多個(gè)背景圖像。 注釋：IE7 以及更早的瀏覽器不支持以及更早的瀏覽器不支持 “inherit”。IE8 需要需要 !DOCTYPE。IE9 支持支持 “inherit”。v 可以設(shè)置如下屬性： background-color background-position background-siz

21、e background-repeat background-origin background-clip background-attachment background-imageWEB DESIGNSCv如果不設(shè)置其中的某個(gè)值，也不會(huì)出問(wèn)題，如果不設(shè)置其中的某個(gè)值，也不會(huì)出問(wèn)題， 比如 background:#ff0000 url(smiley.gif); 也是允許的。v通常建議使用這個(gè)屬性，而不是分別使用單個(gè)屬性，因通常建議使用這個(gè)屬性，而不是分別使用單個(gè)屬性，因?yàn)檫@個(gè)屬性在較老的瀏覽器中能夠得到更好的支持，而為這個(gè)屬性在較老的瀏覽器中能夠得到更好的支持，而且需要鍵入的字母也更少。且需

22、要鍵入的字母也更少。WEB DESIGNSC值值描述描述CSSbackground-color規(guī)定要使用的背景顏色。1background-position規(guī)定背景圖像的位置。1background-size規(guī)定背景圖片的尺寸。3background-repeat規(guī)定如何重復(fù)背景圖像。1background-origin規(guī)定背景圖片的定位區(qū)域。3background-clip規(guī)定背景的繪制區(qū)域。3background-attachment規(guī)定背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。1background-image規(guī)定要使用的背景圖像。1inherit規(guī)定應(yīng)該從父元素繼承 background 屬性的設(shè)置。1WEB DESIGNSCv本例演示如何使用簡(jiǎn)寫屬性來(lái)將所有背景屬性設(shè)置在一個(gè)聲本例演示如何使用簡(jiǎn)寫屬性來(lái)將所有背景屬性設(shè)置在一個(gè)聲明之中。明之中。body background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。這是一些文本。