以下為本站文章分類清單

  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;

 

以下為文章回應區

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

przeprowadzki tanie   2017/8/17 下午 08:21:00

I'm curious to find out what blog system you have been utilizing?
I'm experiencing some minor security problems with my latest blog and
I would like to find something more risk-free.
Do you have any solutions?

skyrim   2017/8/13 下午 02:16:00

What's up colleagues, its fantastic piece of writing about cultureand fully explained, keep it up all the time.

http://theelderscrolls5skyrimevolution225.ru/
skyrim
[url]http://theelderscrolls5skyrimevolution225.ru[/url]

Chip satışı   2017/8/13 上午 07:17:00

Chip satışı

mandihitzler.hatenablog.com   2017/8/12 下午 07:01:00

My spouse and I stumbled over here by a different page
and thought I might as well check things out. I like what I see so now i am
following you. Look forward to finding out about your web page again.

Пантогор гель для суставов цена состав   2017/8/7 下午 12:45:00

I'm gone to tell my little brother, that he should also pay a visit this web site on regular basis
to obtain updated from most recent reports.

frequesias lisboa casino   2017/8/7 上午 07:45:00

http://diutsirob.win/epson-stylus-photo-rx425-printer-driver.php
http://otladatot.download/c-redistributable-for-visual-studio-2012-update-4-x86.php
http://verderanling.win/bullguard-internet-security-2017-offline-installer.php
http://idorthele.win/dictionary-safree-for-windows-7-starter-32-bits.php
http://vehendeket.win/kamasutra-the-art-of-making-love-pdf.php
http://uthoritrec.download/caraobject-the-sims-2.php
http://uldordale.review/hd-video-player-nokia-5233.php
http://safienhar.win/thanos-petrelis-to-aima-mou-mp3.php
http://entirehe.review/downloads-games-medal-of-honor.php
http://ribileleft.download/ace-hood-get-em-up-instrumental-mp3.php
http://tiritmaning.review/free-iso-maker-exe.php
http://verderanling.win/code-block.php
http://meattertro.download/1984-george-orwell-pdf.php
http://safienhar.win/ipl-tone-full-mp3.php
http://palaritar.download/hipchat-for-windows-xp.php
http://parcalrinfo.review/hunting-the-sims-3-free-full-game.php
http://vehendeket.win/gate-2017-books-for-cse-freepdf.php
http://safienhar.win/cannotjava-windows-8.php
http://ribileleft.download/best-os-x-driver-for-8400f.php
http://atrethecke.review/gimp-image-information-for-windows-7-64-bit.php
http://tiritmaning.review/maalai-pozhuthin-mayakathile-tamil-mp3-song-free.php
http://parcalrinfo.review/ifpug-cpm-counting-practices-manual-4-2.php
http://palaritar.download/descargar-driver-canon-smartbase-mp360.php
http://bevehertle.download/camtasia-studio-4-license-key.php
http://meattertro.download/dj-punjab-remix.php
http://uthinrontof.win/ella-henderson-ghost-oliver-nelson.php
http://fetinsparsof.review/i-saw-sparks-coldplay.php
http://parcalrinfo.review/how-much-taxi-drivers-make-in-san-francisco.php
http://onditesin.win/freedriver-canon-i-sensys-mf4140.php
http://otladatot.download/mp3-by-kirk-franklin.php
http://entirehe.review/intuitive-probability-and-random-processes-solution-manual.php
http://uthinrontof.win/software-version-and-change-control-processes.php
http://uldordale.review/fun-funny-games-free-online.php
http://enderetrab.download/nero-burning-rom-11-with-crack.php
http://fahowithec.win/games-to-freefor-mobile.php
http://fetinsparsof.review/driver-quickcam-pro-5000-mac.php
http://onditesin.win/panda-dub-born-2-dub-free.php
http://enderetrab.download/a-ringtone-to-iphone-4.php
http://idorthele.win/driving-license-lahore-pakistan.php
http://lasparlefa.review/famous-crack-climbs.php
http://hecathegro.review/instal-activex-control-x-windows-xp-32-bit.php
http://vehendeket.win/kamasutra-the-art-of-making-love-pdf.php
http://safienhar.win/bengali-hit-movie-songs-free.php
http://enderetrab.download/black-star-riders-bound-for-glory-mp3.php
http://palaritar.download/naruto-shippuden-120-bahasa-indonesia-terbaru-full-movie.php
http://cifirenta.download/harry-potter-and-the-half-blood-prince-free-pdf.php
http://orlerecy.download/instrumen-lagu-d-masiv-merindukanmu.php
http://warefroltal.win/dare-to-dream-ebook-free.php
https://www.sonezeeyar.com/profile/MarlonMori
http://fmmekelle.com/?option=com_k2&view=itemlist&task=user&id=314061
http://cemetrabolivia.com/?option=com_k2&view=itemlist&task=user&id=15007
http://www.congresodeexportacioncolima2017.com/index.php/component/k2/item/96-recorrido-a-empresa
http://www.iassoft.com/UserProfile/tabid/61/userId/5889569/Default.aspx
http://gamelog.org/profile/jinamerewet.html
http://womantalk.co.kr/?document_srl=1201003
http://www.ginim.com/granite_falls_casino_hours_hobbs1696
http://www.cipexinternational.net/?option=com_k2&view=itemlist&task=user&id=2425
http://richardpittam.com/blog/index.php/guestbook/
http://thenui.com/?option=com_k2&view=itemlist&task=user&id=29323
http://www.jcspace2.com/bmd_tomo/yybbs.cgi?list=thread
http://hortach.com/?option=com_k2&view=itemlist&task=user&id=16984
http://clinicsib.ru/?option=com_k2&view=itemlist&task=user&id=11210
http://drupal.thrivewriter.com/node/1649
http://www.costepetrai.com/?option=com_k2&view=itemlist&task=user&id=893524
http://library.atgtire.com/forum/profile.php?section=personality&id=111435
http://www.izmirescortajansi.com/ads/arang-and-the-magistrate-ep-11-eng-sub-good-drama/
http://www.irismary.de/index.php?mod=users&action=view&id=11880
http://facebay.hu/user/profile/218037

How do you get taller?   2017/8/4 下午 12:41:00

Great article! We are linking to this great article on our website.

Keep up the great writing.

What do you do for a strained Achilles tendon?   2017/7/31 下午 12:01:00

Woah! I'm really enjoying the template/theme of this site.
It's simple, yet effective. A lot of times it's tough to get that "perfect balance" between usability and visual appeal.
I must say you've done a excellent job with this. In addition, the blog
loads extremely quick for me on Firefox. Outstanding Blog!

leonorescheffrahn.hatenablog.com   2017/7/31 上午 03:35:00

I seriously love your website.. Very nice colors
& theme. Did you develop this amazing site yourself?
Please reply back as I'm looking to create my own personal website
and want to know where you got this from or what the theme is called.
Thank you!

How do you get taller in a day?   2017/7/28 上午 11:47:00

Hi there would you mind stating which blog platform you're working with?
I'm going to start my own blog in the near future
but I'm having a difficult time selecting between BlogEngine/Wordpress/B2evolution and Drupal.
The reason I ask is because your layout seems different
then most blogs and I'm looking for something unique.
P.S Apologies for getting off-topic but I had to ask!

http://bernard8hyde94.jigsy.com/   2017/7/23 上午 04:33:00

Hey There. I found your blog the use of msn. This is a
really well written article. I'll make sure to bookmark it and return to read extra of your helpful info.

Thank you for the post. I'll certainly return.

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!

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