以下為本站文章分類清單

  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;

 

以下為文章回應區

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

EleonoreGeter.bravesites.com   2017/6/16 下午 11:55:00

Every weekend i used to visit this site, for the reason that i
want enjoyment, as this this website conations actually pleasant funny material too.

   2017/5/21 上午 11:17:00

Hey just wanted to give you a quick heads up. The text in your content seem to be running
off the screen in Ie. I'm not sure if this is a format issue or
something to do with internet browser compatibility but I figured I'd post to let you know.
The design and style look great though! Hope you get the issue solved soon. Cheers

manicure   2017/5/4 上午 04:15:00

Good day! This is kind of off topic but I need some guidance
from an established blog. Is it tough to set up your own blog?
I'm not very techincal but I can figure things out
pretty quick. I'm thinking about setting up my own but
I'm not sure where to begin. Do you have any points or suggestions?
Many thanks

manicure   2017/5/3 下午 07:30:00

Why people still make use of to read news papers when in this
technological world the whole thing is existing on net?

BHW   2017/4/16 上午 09:13:00

Great blog you have here but I was curious if you knew of any user
discussion forums that cover the same topics talked about in this article?
I'd really love to be a part of community where I can get responses from other knowledgeable people that share the same interest.
If you have any suggestions, please let me know. Cheers!

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