div漸變背景色
㈠ 如何將一塊div為黑色背景 漸變成上黑下部透明的
<divid="footer"style="background:#09C;height:150px;text-align:center;font-size:50px;color:#fff;margin-top:20px;">
<divstyle="border:6pxsolid#000;
padding:60px0;
text-align:center;width:200px;
background:#000000;
background:-webkit-gradient(linear,00,0bottom,from(#000000),to(transparent));
background:-webkit-linear-gradient(#000000,transparent);
background:-moz-linear-gradient(#000000,transparent);
background:-ms-linear-gradient(#000000,transparent);
background:-o-linear-gradient(#000000,transparent);
background:linear-gradient(#000000,transparent);
-pie-background:linear-gradient(#000000,transparent);">
</div>
</div>
㈡ 如何用js實現div的背景顏色漸變求解答
CSS3 的linear-gradient 屬性滿足你的需求
㈢ 如何用css實現div模塊的背景漸變
從左上角開始（到右下角）的線性漸變。起點是紅色，慢慢過渡到藍色：
#grad1 {
height: 200px;
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 標準的語法（必須放在最後） */
}
參考網址：網頁鏈接
㈣ 怎麼用css設置DIV背景色漸變顯示
在Mozilla 下
background: -moz-linear-gradient( top,#ccc,#000);
參數說明
1,起點位置top 是從上到下,left是從左到右,left top是左上到右下
2,開始顏色,
3,結束顏色
在Webkit下
-webkit-linear-gradient(top,#ccc,#000);
參數與mozilla一致
在 Opera 下
background: -o-linear-gradient(top,#ccc, #000);
數與mozilla一致
更多的參數應用可以去度娘查詢,有很詳細參數使用示例.
㈤ javascript 如何實現div 顏色的漸變
動態漸變
<span style="font-size:12px;"><html>
...
<body>
<center>
<div id="fade" style="width:600px;height:200px;"></div>
</center>
</body>
</html></span>為了方便查看，使用內嵌樣式，還是推薦使用外鏈樣式的使用啊，接下來進行簡單編寫動態實現漸變效果
<span style="font-size:12px;"><script type="text/javascript">
var node=document.getElementById("fade");
var color="#0000";
var level=1;window.load=function fading(){
node.style.background=color.+level.toString()+level.toString();
level++;
if(level>16){
clearTimeOut(fading);
}else{
setTimeOut(fading,300);
}
}
<script></span>靜態漸變
在css樣式中添加：
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ffffff),color-stop(0.5,#0000ff),to(#ffffff));
簡單解釋下：
linear：這個就碰到了線性漸變和徑向漸變的兩個概念，無非是在一條線上進行變化的線性和像圓一樣向四周擴散的徑向；
後面的四個值：分別代表相應方向的px值，可以從左順時針轉的順序記憶，但是它代表的是to，截止到的顏色
from：這就是開始的顏色了
to：和from是同時出現的，最後漸變結束的顏色
而color-stop：則是指在變化到線的哪個位置的時候會出現什麼顏色，當然是從周圍過渡過去的，相當於from，to過渡點，from過渡點，to；附送下簡單的其他的基本代碼
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#b8c4cb,endColorStr=#f6f6f8);/*IE6*/
background:-moz-linear-gradient(left,#ffffff,#ff0000);/*非IE6的其它*/
background:-webkit-gradient(linear, 100% 0%, 0% 0%, from(#ff0000), to(#0000ff));/*非IE6的其它*/
㈥ div框的背景顏色 可是漸變的嗎
可以是可以，不過兼容性不強只支持很少部分的瀏覽器
下面是實例
<div style="border-top: 8px solid #000;-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;padding: 5px 5px 5px 15px;">在Firefox瀏覽器里能看到邊框顏色漸變效果</div>這個只能在ff下看到漸變
通常情況你還是用圖片解決吧，做圖的時候就要考慮到自動伸展的問題就行了
㈦ html中如何讓背景顏色漸變
1、打開html開發工具，新建一個html文件在html代碼頁面創建一個<div>並給這個標簽添加內一個類名linear：
㈧ div背景顏色怎樣漸變 css實現div層背景顏色漸變代碼
CSS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。
CSS3 定義了兩種類型的漸變（gradients）：線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向與徑向漸變（Radial Gradients）- 由它們的中心定義
線性漸變：
3.1、從上到下的線性漸變：
#grad {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 標準的語法 */
}
3.2、從左到右的線性漸變：
#grad {
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 標準的語法 */
}
3.3、線性漸變 - 對角：
#grad {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 標準的語法 */
}
4.徑向漸變：
4.1、顏色結點均勻分布的徑向漸變：
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 標準的語法 */
}
4.2、顏色結點不均勻分布的徑向漸變：：
#grad {
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 標準的語法 */
}
4.3、形狀為圓形的徑向漸變：
#grad {
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 標準的語法 */
}
5：望採納
㈨ css 如何實現 顏色的漸變
需要准備的材料分別有：電腦、瀏覽器、html編輯器。
1、首先，打開html編輯器，新建html文件，例如：index.html。
㈩ 使用div+css實現背景顏色漸變，怎麼實現呢
如果只要求抄兼容高級瀏覽器，CSS3可以解決。
<divclass="box"></div>
.box{width:500px;height:100px;background-image:-moz-linear-gradient(top,#45B5DA,#0382AD);background-image:-webkit-gradient(linear,50%0%,50%100%,from(#45B5DA),to(#0382AD));background-image:-o-linear-gradient(top,#45B5DA,#0382AD);}如果要兼容低級瀏覽器，例如IE6，還是用背景圖片重復吧。
上面的這屬性可以在CSS手冊里查到。