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>