漸層背景（background）效果，漸層background

漸層背景（background）效果，漸層background

chrom and Safari瀏覽器：

webkit核心的瀏覽器，使用CSS3漸層方法（css-gradient）

-webkit-gradient(type, start_point, end_point, / stop...)-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, / stop...)background: -webkit-gradient(linear,0 0,0 100%,from(#2777EC),to(#6AC1FC));

-webkit-gradient是webkit引擎對漸層的實現參數，一共有五個：
第一個參數表示漸層類型（type），可以是linear（線性漸層）或者radial（放射狀漸層）；
第二個參數和第三個參數，都是一對值，分別表示漸層起點和終點。這對值可以用座標形式表示，也可以用關鍵值表示，比如 left top（左上方）和left bottom（左下角）；
第四個和第五個參數，分別是兩個color-stop函數，color-stop函數接受兩個參數，第一個表示漸層的位置，0為起點，0.5為中點，1為結束點；第二個表示該點的顏色；

Firefox瀏覽器：

Firefox3.6+以後版本改進了很多CSS，Firefox支援兩種類型的CSS漸層：線性(-moz-linear-gradient)和放射狀的(-moz-radial-gradient)

線性漸層(Linear Gradients)

要建立一個線性漸層，您需要設定一個起點和一個漸層的方向（或角度），並定義起止顏色

-moz-linear-gradient( [ || ,]? , [, ]* )

放射狀漸層(Radial Gradients)

為放射狀漸層的文法非常類似於線性漸層

-moz-radial-gradient([ || ,]? [ || ,]? , [, ]*)background: -moz-linear-gradient(#2777EC, #6AC1FC);

-moz-linear-gradient有三個參數：
第一個參數表示線性漸層的方向，top是從上到下、left是從左至右，如果定義成left top，那就是從左上方到右下角。
第二個和第三個參數分別是起點顏色和終點顏色。你還可以在它們之間插入更多的參數，表示多種顏色的漸層。

萬惡的IE瀏覽器：

IE瀏覽器下漸層背景的使用需要使用IE的漸層濾鏡

filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=1)

上面的濾鏡代碼主要有三個參數：
依次是：startcolorstr, endcolorstr, 以及gradientType，其中gradientType=1代表橫向漸層，gradientType=0代表縱向淅變；
startcolorstr=”色彩” 代表漸層漸層起始的色彩，endcolorstr=”色彩” 代表漸層結尾的色彩；

上面代碼實現的是紅色至藍色的漸層，但是不含透明度變化，這是由於IE目前尚未支援opacity屬性以及RGBA顏色，要實現IE下的透明度變化，還是需要使用IE濾鏡，IE的透明度濾鏡功能比較強大，這種強大反而與Firefox或是Safari瀏覽器下的css-gradient背景漸層的用法類似。例如下面的使用：

filter:alpha(opacity=100 finishopacity=0 style=1 startx=0,starty=5,finishx=90,finishy=60)

各個參數的含義如下：
opacity表示透明度，預設的範圍是從0 到 100，他們其實是百分比的形式。也就是說，0代表完全透明，100代表完全不透明。
finishopacity 是一個選擇性參數，如果想要設定漸層的透明效果，就可以使用他們來指定結束時的透明度。範圍也是0 到 100。
style用來指定透明地區的形狀特徵：
0 代表統一形狀
1 代表線形
2 代表放射狀
3 代表矩形。
startx 漸層透明效果開始處的 X座標。
starty 漸層透明效果開始處的 Y座標。
finishx 漸層透明效果結束處的 X座標。
finishy 漸層透明效果結束處的 Y座標。

Opera瀏覽器：

Opera新版和Firfox原理用法一樣：

background: -o-linear-gradient(#2777EC, #6AC1FC);

整理相容性的漸層背景效果：

.button{
background-color: #2777EC;
border: 1px solid #0099FF;
text-transform: uppercase;
font-size: 14px;
line-height: 22px;
padding: 15px 50px;
cursor: pointer;
color: #FFF;
text-transform: none;
border-radius: 4px;
-webkit-border-radius:4px;
-moz-border-radius: 4px;
box-shadow: 1px 3px 5px #555;
-moz-box-shadow: 1px 3px 5px #555;
-webkit-box-shadow: 1px 3px 5px #555;
background: -webkit-gradient(linear,0 0,0 100%,from(#2777EC),to(#6AC1FC));
background: -moz-linear-gradient(#2777EC, #6AC1FC);
background: -o-linear-gradient(#2777EC, #6AC1FC);
background: linear-gradient(top center, #2777EC, #6AC1FC);
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=130) progid:DXImageTransform.Microsoft.gradient(startcolorstr='#2777EC',endcolorstr='#6AC1FC',gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=130) progid:DXImageTransform.Microsoft.gradient(startcolorstr='#2777EC',endcolorstr='#6AC1FC',gradientType=0);
}
.button:active,.button:focus{
color: #000;
background: -webkit-gradient(linear, 0 0, 100% 0,from(#6AC1FC), to(#2777EC));
background: -moz-linear-gradient(#6AC1FC, #2777EC);
background: -o-linear-gradient(#6AC1FC, #2777EC);
background: linear-gradient(left center, #6AC1FC, #2777EC);
}<input class="button" type="button" value="點擊按鈕" />
<a class="button" href="/">連結按鈕</a>
<span class="button">點擊按鈕</span>
css可以實現背景漸層顏色，不可以用圖片，只可以用顏色，各位給個答案

相容多瀏覽器就要為每一個瀏覽器寫對應的 CSS，太低版本的瀏覽器只能使用圖片做背景。
下面是當前五大瀏覽器對 gradient 的支援
<style type="text/css" media="screen">
#gradient {
width: 200px;
height: 200px;
/* 如果瀏覽器不支援漸層，使用映像作為背景 */
background: url(gradient.jpg);
/* Webkit: Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6600), to(#339900));
/* Webkit: Safari 5.1+, Chrome 10+ */
background: -webkit-linear-gradient(top, #ff6600, #339900);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #ff6600, #339900);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #ff6600, #339900);
/* IE 10 */
background: -ms-linear-gradient(top, #ff6600, #339900);
/* IE < 10 */
/* 注意：這一行必須寫在最後 */
FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900);}
</style>
<div id="gradient"></div>
我在 IE6，IE8，FF3.6，FF 4，Chrome 12，Opera 11.11，Safari 5.0.5 下測試結果均片顯示。



 
問dreamweaver怎操作可以實現背景漸層的效果？拜託各位了 3Q

其實就是用一個漸層的圖通過平鋪的方式實現的，我這有一套很詳細的說明，給你吧。 我想大家常常為一些比較合適於自己的網頁背景的圖片而發愁吧，這個我想也是有的，因為這些圖片不是太大就是太小，或者太亂，那麼有沒有辦法讓圖片能合自己的首頁的胃口呢？答案是肯定的。 想知道怎麼來實現嘛，好吧，大家現在開始跟著我做，我保證大家一定一學就會。不過，我想在網上“成家”的朋友一般分為在網吧裡“開業”（就像我一樣，剛開始從他人的首頁拉相關的代碼來改的），還有就是在自己家裡用DW或FP之類的專業軟體製作好上傳的，所以呢，我打算分開兩步介紹，首先為在網吧裡“開業”的朋友著想吧，最後再簡要的介紹一些用DW4做的背景樣式。 其實總得說來一切都是一樣的，只不過是採用的方式不同罷了。好了閑話少說了，現在就入正題吧。 說到背景也就只有背景顏色和顏色圖片，這兩個我想大家一定都知道在裡加入bgcolor="#808080"和background="URL"對吧，可是我這裡將要介紹不是這樣做的，而是用CSS樣式來做的，雖說有些麻煩，可是整體配合還是非常不錯的。 ·背景顏色 background-color 我想這個我就不用多做介紹了，顏色代碼我想大家都知道的，不是用英文來代替就是用指定的代碼來表示的。這個的預設值是transparent（透明色）。 例：body{background-color:yellow} H1{background-color:#000000} ·背景圖片 background-image 背景圖片和背景顏色在HTML裡面的設定也是基本相同的，都可以在裡加入相關的語句來完成。但是在這裡，我所指的並非是用這種方法，我用的方法還是CSS。background-image這個的主要功能也就是用來顯示圖片，如果需要顯示圖片的話，那麼只要在後面加上url(圖片的地址）就可以了，不顯示嘛，那是最簡單不過的了，什麼也不要就行了，因為這個預設的就是none，而要加的話，就是在後面加上這個none就可以了。 例：body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF')} h1{background-image:url('none')} 大家在使用裡的背景圖片時，一定常常遇到一些圖片因為太小，而產生種種片的重複出現而破壞了整個頁面的美感，想換成其它圖片又不合適之類的麻煩情況吧。不過現在好了，大家只要用了以下的幾個CSS裡控製圖片方法，那麼你以後就不會再有此類的麻煩事發生了。 ·圖片是否重複顯示 background-repeat 有時候重複顯示是需要的，可是有時候重複顯示則是讓人頭痛的，現在這個可以很好的協助你了，而且它還可以幫你控製圖片重複的方式（水平方向重複、垂直方向重複以及兩個方向都有重複），而要實現這三個方向的重複也就只要在bcackground-repeat後面加上repeat-x（水平方向鋪開）、repeat-y（垂直方向鋪開）、repeat（兩個方向鋪開）。 當然，它可以控製圖片的重複，也可以控製圖片不重複的。no-repeat這個就是用來表示只顯示一幅背景圖片，而不是重複出現的，這個可不是預設的喲，預設的是重複顯示背景圖片（repeat）。 例：body{background-image:url('file&:///C:&#47......餘下全文>>