DIV CSS 佈局教程網

用CSS使DIV背景顏色漸變,適用於IE、Chrome、火狐和Opera等浏覽器。

效果如下：
用CSS是div顏色漸變：
從綠到紅



從黃到紅示例：http:///keleyi/phtml/divcss/2.htm

代碼：
<style type="text/css">
.jb_keleyi_com{
height: 300px;
width:100px;
margin:0px auto;
background-image: -moz-linear-gradient(top, #00FF00, #FF0000); /*火狐*/
background: -o-linear-gradient(top, #00FF00 0%,red 100%);/*Opera*/
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00FF00), color-stop(1,#FF0000)); /*Chrome*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF00', endColorstr='#FF0000', GradientType='0'); /*IE*/
}
</style>

用CSS是div顏色漸變：<br />
<div class="jb_keleyi_com">從綠到紅<br /><br /></div>

效果圖：

---

FILTER:progid:DXImageTransform.Microsoft.Gradient使用
語法：
filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth)
屬性：
enabled:可選項。布爾值(Boolean)。設置或檢索濾鏡是否激活。 true | false
　　true: 默認值。濾鏡激活。
　　false:濾鏡被禁止。


startColorStr:可選項。字符串(String)。設置或檢索色彩漸變的開始顏色和透明度。
　　其格式為 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 為十六進制正整數。取值范圍為 00 - FF 。 RR 指定紅色值， GG 指定綠色值， BB 指定藍色值，參閱 #RRGGBB 顏色單位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范圍的值將被恢復為默認值。
　　取值范圍為 #FF000000 - #FFFFFFFF 。默認值為 #FF0000FF 。不透明藍色。
EndColorStr:可選項。字符串(String)。設置或檢索色彩漸變的結束顏色和透明度。參閱 startColorStr 屬性。默認值為 #FF000000 。不透明黑色。
特性：
Enabled:可讀寫。布爾值(Boolean)。參閱 enabled 屬性。
GradientType:可讀寫。整數值(Integer)。設置或檢索色彩漸變的方向。1 | 0
　　1:默認值。水平漸變。
　　0:垂直漸變。
StartColorStr:可讀寫。字符串(String)。參閱 startColorStr 屬性。
StartColor:可讀寫。整數值(Integer)。設置或檢索色彩漸變的開始顏色。 取值范圍為 0 - 4294967295 。 0 為透明。 4294967295 為不透明白色。
EndColorStr:可讀寫。字符串(String)。設置或檢索色彩漸變的結束顏色和透明度。參閱 startColorStr 屬性。默認值為 #FF000000 。不透明黑色。
EndColor:可讀寫。整數值(Integer)。設置或檢索色彩漸變的結束顏色。 取值范圍為 0 - 4294967295 。 0 為透明。 4294967295 為不透明白色。當在腳本中使用此特性時，也可以用十六進制格式： 0xAARRGGBB 。
說明：
在對象的背景和內容之間顯示定制的色彩層。
當此效果通過轉變顯示時，在漸變冊色彩層之上的文本程序性的初始化為透明的，當色彩漸變實現後，文本顏色會以其定義的值更新。
示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#550000FF, endColorstr=#55FFFF00) ;}

#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient() ;}
具體使用
<table border=1 width=100%>
<tr>
<td STYLE="FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr='#ffffff',endColorStr='#ff0000')"> </td>
</tr>
</table>




哀悼日，各網站頁面全部用黑白色，用以下濾鏡！！

為方便站點哀悼，特提供css濾鏡代碼，以表哀悼。以下為全站CSS代碼。

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

使用方法：這段代碼可以變網頁為黑白，將代碼加到CSS最頂端就可以實現素裝。建議全國站長動起來。為在地震中遇難的同胞哀悼。

如果網站沒有使用CSS，可以在網頁/模板的HTML代碼和 之間插入：


html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}


有一些站長的網站可能使用這個css 不能生效，是因為網站沒有使用最新的網頁標准協議

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

請將網頁最頭部的替換為以上代碼。

有一些網站FLASH動畫的顏色不能被CSS濾鏡控制，可以在FLASH代碼的和之間插入：


最簡單的把頁面變成灰色的代碼是在head 之間加

html {
FILTER: gray
}

另在哀悼日或遇難的新聞，所有專題和主題 圖片上不能使用紅色標題。



更多參考：
用css實現網頁背景漸變的代碼如下：

一、從上往下漸變

Example Source Code:
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}

二、從左上至右下漸變

Example Source Code:
body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue;
}

三、從左往右漸變

Example Source Code:
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
}

一、從上往下漸變

Example Source Code:
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);
}

二、從左上至右下漸變

Example Source Code:
body{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,
startX=50,finishX= 100,startY=50,finishY=100);
background-color: skyblue;
}

三、從左往右漸變

Example Source Code:
body{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);
}

四、從上往下漸變

Example Source Code:
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"

五、從上往下漸變

Example Source Code:
style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"