css3背景色漸變
❶ 如何CSS實現網頁背景三種顏色漸變效果
純css是靜態的不可能實現漸變什麼的，必須用JavaScript或jQuery之類的
我用jQuery
http://www.phpstudy.net/e/tiy/ii.php?q=jquery_effect_toggle_function
這是w3c的那個實例，我也做過現在找不到了，抱歉了
❷ 如何通過CSS3實現背景圖片色彩的梯度漸變
background:linear-gradient(red,green,blue);
如加入瀏覽器適應的話就這么寫
background:-webkit-linear-gradient(red,green,blue);
background:-o-linear-gradient(red,green,blue);
background:-moz-linear-gradient(red,green,blue);
background:linear-gradient(red,green,blue);
❸ 使用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手冊里查到。
❹ 用css3設置背景漸變之後，還能加背景圖片嗎
可以的，只要把它們用逗號隔開即可，如果你願意，你甚至可以用多張圖片與多個漸變進行復雜的效果疊加。比如下面是兩張圖片錯開位置後放到漸變背景上的例子：
<style>
#ddiv
{
width:480px;height:360px;
background:url(圖片1)no-repeat30px20px,url(圖片2)no-repeat160px180px,-webkit-linear-gradient(top,#966,#8ff)
}
</style>
<divid="ddiv"></div>
❺ 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：望採納
❻ css3背景顏色漸變什麼顏色好
<style type="text/css">
.linear{
width:100%;
height:600px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red); /*IE 6 7 8*/
background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */
background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff)); /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #fff, #0000ff); /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #fff, #0000ff); /*Opera 11.10+*/
}
</style>
<body>
<div class="linear"></div>
</body>
google模式下：
ie模式下：
火狐模式下：
FILTER（ie模式）；background:-moz-linear-gradient（火狐模式）；background:-webkit-gradient（谷歌模式）。
以上是為了區別不同瀏覽器的不同效果，我把色碼區別開了。為了兼容所有瀏覽器的相同效果的css3漸變色，你可以把色碼調試成一樣。
❼ CSS3樣式中如何讓背景漸變與背景圖片共存
目前，對CSS3支持日趨完善，實現兼容性的漸變背景效果是完全可以的，讓背景漸變與背景圖片共存的方法很簡單，主要要注意的是圖片要 保持「最小單元」的准則，選擇正確的瀏覽器，該問題就能得到解決，下面介紹一下具體的解決方法。
❽ 怎樣用css實現圖片的漸變如圖
<style>
div {
box-sizing:border-box;
width:400px;
height:240px;
font-size:22px;
padding-top:100px;
overflow:hidden;
background:no-repeat center top / 100% 100%;
background-image:linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0)), url(背景圖片路徑寫在這)
}
</style>
<div>
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</div>
❾ css3漸變色怎麼來實現，css3漸變色怎麼寫
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<styletype="text/css">
div{/*線性漸變*/
width:300px;
height:150px;
background:red;/*一些不支持背景漸變的瀏覽器*/
background:-moz-linear-gradient(top,red,rgba(0,0,255,0.5));
background:-webkit-gradient(linear,00,0bottom,from(#ff0000),to(rgba(0,0,255,0.5)));
background:-o-linear-gradient(top,red,rgba(0,0,255,0.5));
}
p{/*徑向漸變*/
width:300px;
height:150px;
background:-webkit-radial-gradient(red,green,blue);/*Safari5.1-6.0*/
background:-o-radial-gradient(red,green,blue);/*Opera11.6-12.0*/
background:-moz-radial-gradient(red,green,blue);/*Firefox3.6-15*/
}
</style>
</head>
<body>
<div>
</div>
<p>
</p>
</body>
</html>