html背景色漸變
1. 怎麼用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一致
更多的參數應用可以去度娘查詢,有很詳細參數使用示例.
2. 如何用js實現div的背景顏色漸變求解答
CSS3 的linear-gradient 屬性滿足你的需求
3. 在HTML種，怎麼能做到背景顏色漸變（由深變淺）
先在ps里做一個你想要的漸變，然後切下來，最後平鋪， repeat-x，不懂的Q我
4. 怎樣用css實現網頁背景顏色漸變
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. 求html文字背景色漸變的代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.linear {
font-size:18px;
font-weight:400;
width:250px;
;
height:40px;
line-height:40px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=##218ee1, endColorStr=#ffffff); /*IE*/
background:-moz-linear-gradient(left, #218ee1, #fafafa);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#15A216), to(#ffffff));/*谷歌*/
background-image: -webkit-gradient(linear, left bottom, left top, color-start(0, #218ee1), color-stop(1, #ffffff));/* Safari & Chrome*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#15A216', endColorstr='#fafafa'); /*IE6 & IE7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216', endColorstr='#fafafa')"; /* IE8 */
}
</style>
</head>
<body>
<div class="linear">申請鑒定流程便捷</div>
</body>
</html>
6. 使用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手冊里查到。
7. html 中含有漸變的背景怎麼做
<html>
<head>
<title></title>
<style type="text/css">
.linear{
width:100%;
height:600px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=##15A216,endColorStr=#fafafa); /*IE*/
background:-moz-linear-gradient(top,#15A216,#fafafa);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#15A216), to(#fafafa));/*谷歌*/
background-image: -webkit-gradient(linear,left bottom,left top,color-start(0, #15A216),color-stop(1, #fafafa));/* Safari & Chrome*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216', endColorstr='#fafafa'); /*IE6 & IE7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#15A216', endColorstr='#fafafa')"; /* IE8 */
}
</style>
</head>
<body>
<div class="linear"></div>
</body>
</html>
8. html怎麼實現網頁背景色漸變動態選擇
<!DOCTYPEhtml>
<html>
<head>
<style>
html{
width:100%;
height:100%;
}
#main{
display:flex;
justify-content:space-between;
}
</style>
</head>
<bodyid="main">
<div>
Start:<inputtype="color"id="start"onchange="setStart(this)"/>
</div>
<div>
End:<inputtype="color"id="end"onchange="setEnd(this)"/>
</div>
</body>
<script>
letstartColor=start.value='#ac3535'
letendColor=end.value='#d5c3c3'
functionsetColor(){
main.style.setProperty("background-image",`-gradient(toright,${startColor},${endColor})`)
}
functionsetStart(e){
startColor=e.value
setColor()
}
functionsetEnd(e){
endColor=e.value
setColor()
}
setColor()
</script>
</html>
9. html中想要將背景顏色漸變怎麼弄
html中將背景顏色漸變抄步驟襲如下：
1、先使用一個div標簽。
