以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

CSS GradientCSS 漸層背景與多重背景影像

3/8 12' icon
Photo by http://www.webdesignerwall.com

多數 CSS3 屬性,建議加上瀏覽器識別,如

背景漸層

CSS3 針對顏色,新增了漸層色的設定,截至目前為止,似乎只有在背景上有用,文字及框線無法使用漸層。漸層色的屬性為 linear-gradient 或 radial-gradient 語法為

linear gradient(顏色漸變方向, 色碼1 位置1,色碼 2 位置2,....)

直線漸層,顏色漸變方向,只要指出起點即可,例如 top 代表由上至下,left 代表由左至右,top left 代表由左上到右下,簡言之,四個角、四個邊都可以指定為漸變方向起始點。

顏色漸變方向還可以用"角度",例如 45degree (左下到右上),-45degree (左上到右下),相較於前述使用文字描述顏色漸變方向,使用角度變化較多。

以下幾個範例

background:linear-gradient(top,#0000FF,#0099FF);
background:-moz-linear-gradient(top,#0000FF,#0099FF);
background:-webkit-linear-gradient(top,#0000FF,#0099FF);
background:linear-gradient(left top,#330000,#CC3366);
background:-moz-linear-gradient(left top,#330000,#CC3366);
background:-webkit-linear-gradient(left top,#330000,#CC3366);

至於放射狀的語法,以及漸層語法生成器,可參考以下連結

http://www.awcore.com/url/aHR0cDovL3d3dy5jb2xvcnppbGxhLmNvbS9ncmFkaWVudC1lZGl0b3Iv

Google 關鍵字 : CSS gradient

多重背景影像

對於使用背景影像,過去 CSS1 所制訂的規範,讓許多人覺得很困擾,尤其是背景影像不能調整大小的問題,在 CSS3 中,針對這些問題都提出了解決方案,例如


background-clip 背景範圍
border-box : 背景範圍含區塊留白、邊框大小
padding-box : 背景範圍包含區塊的留白
content-box : 背景範圍只在區塊內容之後 
background-origin 背景圖起始範圍
border-box : 範圍依區丟含留白、邊框大小
padding-box : 範圍依區含留白大小
content-box : 範圍依區塊內容大小
background-size 背景圖大小
xpx ypx : 像素
x% y% : 百分比
cover : 填滿區塊寬度,高度等比
contain : 填滿區塊高度,寬度等比 

而這其中,比較有趣的是背景可以使用多個影像,語法不變,只要用逗號隔開,例如

background:url(image1), url(image2), url(image3);

請注意上面的寫法沒有問題,但執行出來絕對不是你想像的(以下會提到),先看例子

background:
url(/cssstyle/quot1.gif) left top no-repeat,
url(/cssstyle/quot2.gif) right bottom no-repeat;

如上左上角、右下角各有一個引號圖案。

背景同時存在漸層及影像

由於,漸層色也是背景屬性之一,所以也可以用多重背景影像的概念來處理,例如:

background:linear-gradient(top,#0000FF,#0099FF),url(/images/yes.png) center bottom no-repeat;
background:-moz-linear-gradient(top,#0000FF,#0099FF),url(/images/yes.png) center bottom no-repeat;
background:-webkit-linear-gradient(top,#0000FF,#0099FF),url(/images/yes.png) center bottom no-repeat;

 

 

background 後同時使用了漸層設定以及影像,中間以逗號隔開,由於 CSS 向來講究先來後到,所以上例,先畫漸層,再把影像放到漸層後面,所以影像就看不到了。

換個順序,把影像設定放在前面,如下,就可以同時顯示漸層及影像了

background:url(/images/yes.png) center bottom no-repeat,linear-gradient(top,#0000FF,#0099FF);
background:url(/images/yes.png) center bottom no-repeat,-moz-linear-gradient(top,#0000FF,#0099FF);
background:url(/images/yes.png) center bottom no-repeat,-webkit-linear-gradient(top,#0000FF,#0099FF);

 

 

如果看到這裡,你還不道我講什麼,或你只是看到藍底白字,暗紅底白字,有很大的可能,你必需要換瀏覽器了

還有個例子,影像放在漸層後,卻一樣可以顯示出來,差別是漸層色使用 rgba 來指定,如下

background:#0000FF; <-- 底色為紅色
background:linear-gradient(top,#0000FF,rgba(255,0,0,0.5)),<-- 漸層由藍到50%藍
url(/images/yes.png) center bottom no-repeat; <-- 背景圖是 yes.png
background:-moz-linear-gradient(top,#0000FF,rgba(255,0,0,0.5)),url(/images/yes.png) center bottom no-repeat;
background:-webkit-linear-gradient(top,#0000FF,rgba(255,0,0,0.5)),url(/images/yes.png) center bottom no-repeat;

 

 

所以,漸層色如果設成透明度由 100% 到 0%,再放上一張底圖,看起來就像底圖淡出的效果了,例如

background:
	linear-gradient(toprgba(255,255,255,1),
	rgba(255,255,255,0)),url(...) center bottom no-repeat;
background:
	-moz-linear-gradient(top,rgba(255,255,255,1),
	rgba(255,255,255,0)),url(...) center bottom no-repeat;
background:
	-webkit-linear-gradient(top,rgba(255,255,255,1),
	rgba(255,255,255,0)),url(...) center bottom no-repeat;

 

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: