網(wǎng)頁設計與制作（活頁式） 課件 情景8-5 背景屬性

網(wǎng)頁設計與制作CSS背景屬性授課教師：吳紀磊HTMLcsscssJavaScript目錄CONTENTS12學習目標知識講解學習目標01學習目標學習目標01理解CSS的背景屬性學習目標02掌握CSS的背景屬性的設置02知識點講解學習導航

網(wǎng)頁能通過背景圖像給人留下第一印象，如節(jié)日題材的網(wǎng)站一般采用喜慶祥和的圖片來突出效果。

所以在網(wǎng)頁設計中，控制背景顏色和背景圖像是一個很重要的步驟。1、CSS背景屬性

首先，我們來看一下CSS相關的背景屬性：background-color:css設置背景顏色。background-position:css設置背景圖像的位置。background-attachment:背景圖像是否固定或者隨著頁面的其余部分滾動。background:簡寫屬性，作用是將背景屬性設置在一個聲明中。background-repeat:css設置背景圖片是否重復及如何重復。background-image:css設置圖片背景。1、CSS背景屬性

CSS的背景屬性主要用于設置對象背景顏色或背景圖片以及背景圖片的拉伸方向及其位置等樣式。常用的背景屬性如表下所示：屬性描述background綜合屬性，在一條聲明中設置所有背景屬性的簡寫屬性。background-attachment設置背景圖像是固定的還是與頁面的其余部分一起滾動。background-clip規(guī)定背景的繪制區(qū)域。background-color設置元素的背景色。background-image設置元素的背景圖像。background-origin規(guī)定在何處放置背景圖像。background-position設置背景圖像的開始位置。background-repeat設置背景圖像是否及如何重復。background-size規(guī)定背景圖像的尺寸。1、CSS背景屬性CSS中，顏色值通常以下方式定義:background-color0101十六進制-如：#ff0000。02RGB-如：rgb(255,0,0)。03顏色名稱-如：red。04默認–transparent，透明之意，如果一個元素沒有指定背景色，那么背景就是透明的。05inherit從父元素繼承背景顏色，這個在IE上存在兼容問題。1、CSS背景屬性background-color01接下來通過案例演示元素背景顏色的設置方法，具體CSS代碼如下：h2{ font-family:"微軟雅黑"; color:#FFF;background-color:#F00;/*設置標題的背景顏色*/}1、CSS背景屬性默認地，背景圖片位于元素的左上角，并在水平和垂直方向上重復。body{background-image:url('paper.gif');}background-image02提示：背景顏色和背景圖片是可以共存的。請設置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可獲得良好的視覺效果。body{background-image:url('paper.gif');background-color:#fff;}1、CSS背景屬性如果需要對背景普片平鋪，可以使用background-repeat屬性。具體使用方法如下：body{background-image:url('gradient2.png');background-repeat:repeat-x;}background-repeat03repeat：沿水平和豎直兩個方向平鋪（默認值）；no-repeat：不平鋪（圖像位于元素的左上角，只顯示一次）；repeat-x：只沿水平方向平鋪；repeat-y：只沿豎直方向平鋪。例如：1、CSS背景屬性background-position屬性用來控制背景圖片的位置。一般配合background-repeat:no-repeat;使用。body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:righttop;}background-position04為background-position屬性提供值有很多方法。可以使用一些關鍵字：top、bottom、left、right和center。通常，這些關鍵字會成對出現(xiàn)，還可以使用長度值，如100px，還可以使用百分數(shù)值。1、CSS背景屬性在網(wǎng)頁上設置背景圖像時，隨著頁面滾動條的移動，背景圖像也會跟著一起移動。如果希望背景圖像固定在屏幕上，不隨著頁面元素滾動，可以使用background-attachment屬性來設置。其屬性值如下：background-attachment05scroll：圖像隨頁面元素一起滾動（默認值）。fixed：圖像固定在屏幕上，不隨頁面元素滾動。body{background-image:url('image.png');background-repeat:no-repeat;background-attachment:fixed;}1、CSS背景屬性background屬性在一個聲明中設置所有背景屬性。在CSS中是一個復合屬性。background06通常建議使用這個屬性，而不是分別使用單個屬性，因為這個屬性在較老的瀏覽器中能夠得到更好的支持，而且需要鍵入的字母也更少。需要注意的是，各個樣式順序任意，中間空格隔開，不需要樣式可以省略。但在實際的工作中，通常按照背景色、圖像、平鋪、定位、固定。body{background:#00FF00url('bgimage.gif')no-repeatfixe