CSS速成教程—介紹網頁背景——3

標籤：ott   關鍵字   表格   head   設定圖   div   數值   建立   部分   

1.CSS 背景：

css 允許應用純色作為背景，也允許使用背景映像建立相當複雜的效果

屬性	描述
background-attachment	背景映像是否固定或者隨著頁面的其餘部分滾動
background-color	設定元素的背景顏色
background-image	把圖片設定為背景
background-position	設定背景圖片的起始位置
background-repeat	設定背景圖片是否及如何重複

 

表格中的屬性我們將會通過下面兩個例子給大家一一講述。

 例子 1：背景顏色

body{   background-color: red;}

例子 2：設定背景圖

body{   background-image: url("python.png")}

大家可以看到顯示出來的背景圖有很多個 python 圖片，這是因為預設情況下背景圖顯示重複，我們可以background-repeat屬性來設定圖片是否可重複。 css.css 添加以下內容

body{   background-image: url("python.png");   background-repeat: no-repeat;}

no-repeat 表示不能重複，repeat 可重複，repeat-x 表示 x 軸重複，repeat-y 表示 y 軸重複

ackground-position用來設定圖片的起始位置 下面的例子在 body 元素中將一個背景圖從中間頂部放置：

body{   background-image: url("python.png");   background-repeat: no-repeat;   background-position:center top;}

　　為 background-position 屬性提供值有很多方法。首先，可以使用一些關鍵字：top、bottom、left、right 和 center。通常，這些關鍵字會成對出現，不過也不總是這樣。還可以使用長度值，如 100px 或 5cm，最後也可以使用百分數值。不同類型的值對於背景映像的放置稍有差異。我們這裡不詳細闡述屬性值，需要用到的時候大家可以在 w3school 上面尋找。

背景關聯 如果網頁比較長，那麼當網頁向下滾動時，背景映像也會隨之滾動。當網頁滾動到超過映像的位置時，映像就會消失。 我們可以通過background-attachment屬性防止這種滾動。通過這個屬性，可以聲明映像相對於可視區是固定的（fixed），因此不會受到滾動的影響：

body{   background-image: url("python.png");   background-repeat: no-repeat;   background-attachment:fixed;}

防止背景圖滾動相信大家大家也是經常見到，尤其是一些煩人的廣告。

2.css3 背景

屬性	描述
background-size	規定背景圖片的尺寸
background-origin	規定背景圖片的定位地區
background-clip	規定背景的繪製地區

我們還是引用上面的例子來講述這些屬性。

body{   background-image: url("python.png");   background-repeat: no-repeat;   background-size：100px 100px;}

 

CSS速成教程—介紹網頁背景——3