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(left top,#330000,#CC3366);
background:-moz-linear-gradient(left top,#330000,#CC3366);
background:-webkit-linear-gradient(left top,#330000,#CC3366);



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);


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%,再放上一張底圖,看起來就像底圖淡出的效果了,例如

	rgba(255,255,255,0)),url(...) center bottom no-repeat;
	rgba(255,255,255,0)),url(...) center bottom no-repeat;
	rgba(255,255,255,0)),url(...) center bottom no-repeat;




Can you grow taller with exercise?   2017/7/16 上午 10:02:00

I all the time emailed this webpage post page to all my associates, because if like to
read it afterward my links will too.

How much does it cost to lengthen your legs?   2017/7/15 下午 10:00:00

Pretty nice post. I just stumbled upon your weblog and wanted to say that I have really enjoyed browsing your blog
posts. After all I will be subscribing to your rss feed and I hope you write again very soon!

foot pain after surgery   2017/7/2 下午 03:46:00

I drop a leave a response when I especially enjoy a
post on a site or if I have something to contribute to the conversation. Usually
it is caused by the sincerness communicated in the post I browsed.
And on this article 【卜維丰】CSS 漸層背景與多重背景影像.
I was actually excited enough to write a thought ;-) I do have some
questions for you if you usually do not mind. Could it be simply me or does it seem like a
few of these comments appear like left by brain dead folks?
:-P And, if you are writing on additional social sites, I'd like to follow anything new you have to
post. Would you make a list all of your communal pages like your linkedin profile, Facebook page or twitter feed?

   2017/6/24 下午 07:10:00

Hello my friend! I want to say that this article is awesome, great written and
include almost all significant infos. I would like to see
extra posts like this.

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!

  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝