技術標籤：HTML5網頁設計css3

6.1 背景屬性

6.1.1 背景顏色

■在使用background-color屬性時，取值可以是顏色關鍵字，如 red 表示紅色；也可以是 RGB（紅、綠、藍），如 RGB(255/0/0) 表示紅色；還可以是十六進位制的數字，如 #ff0000 表示紅色。

6.1.2 背景圖片

background-image: url(圖片的url)

在設定元素背景影象的同時設定元素的背景顏色，瀏覽器會優先顯示背景圖片，當瀏覽器不能載入圖片時，則顯示背景顏色。

6.1.3 背景圖片的重複方式

background-repeat: repeat | no-repeat | repeat-x | repeat-y 
 

6.2 背景圖片的定位

6.2.1 background-position 屬性

■預設情況下，背景圖片都是從設定了 background 屬性的元素的左上角開始出現。

background-position: 關鍵字 | 百分比 | 畫素值

若只設置一個值時，第 1 個值代表水平偏移位置，第 2 個值預設為居中。

6.2.2 CSS Sprites

■CSS Sprites，在國內也稱之為 CSS 精靈，是一種圖片網頁應用處理方式。它允許將一個頁面涉及到的所有零星圖片均包含到一張大圖中。

6.3 背景的漸變

6.3.1 線性漸變

background: linear-gradient(<angle> || <direction>,< color_stop>, <color_stop>...);
 

■重複線性漸變

■可以通過repeating-linear-gradient()建立一個由重複線性漸變組成的背景效果，類似linear-gradient函式，並且採用相同的引數，但是它會在所有方向上重複漸變以覆蓋其整個容器，因此稱之為重複線性漸變。

6.3.2 徑向漸變

background: radial-gradient (<shape> || <size> at <position>, <color_stop>, ...);

■重複徑向漸變

■需要使用 repeating-radial-gradient() 函式。

6.4 陰影屬性

6.4.1 文字陰影

text-shadow: h-shadow v-shadow blur color;

6.4.2 盒子陰影

box-shadow: h-shadow v-shadow blur spread color;

（覺得這篇筆記對你有點用的話，麻煩你為本筆記點贊，評論，分享或收藏，因為這將是我輸出更多筆記的動力，感謝！）