怎么设计css网页背景颜色过渡?

Posted 2023-03-20

请给出完整代码！谢谢！

CSS实现渐变背景效果兼容主流浏览器
IE浏览器下渐变背景的使用需要使用IE的渐变滤镜filter
对于Firefox浏览器下(Firefox 3.6+)渐变背景的实现需使用CSS3渐变属性 为-moz-linear-gradient属性
对于webkit核心的浏览器，如Chrome/Safari浏览器下渐变背景的实现也是使用CSS3 渐变方法为-webkit-gradient
代码如下：
.gradient
　　width:300px;
　　height:150px;
　　filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE*/
　　-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/
　　background:red; /* 一些不支持背景渐变的浏览器 */
　　background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); /*Firefox*/
　　background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5))); /*Chrome/Safari*/
　　
<div class="gradient"></div>

参考技术A 如果想做的真正的颜色过渡兼容性比较好，还是切一个宽1像素的图片，做背景，然后平铺效果最好。纯代码实现复杂而且兼容性不是很好。 参考技术B 用一张背景图片,在背景图片中实现过渡效果,然后用CSS添加上去就是了.
如:
body
background: #78BCE8 url(/images/background.gif);
参考技术C .hbar FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr='#25323A',endColorStr='#6E706D');
.vbar FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#25323A',endColorStr='#6E706D'); 参考技术D 纯CSS实现，只能用图片代替

使用div+css实现背景颜色渐变，怎么实现呢？

利用css3可实现背景颜色渐变：

一、线性渐变：

    1、线性渐变在 Mozilla 下的应用

　　语法：

     -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

  2、线性渐变在 Webkit 下的应用

　　语法： 

-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法

3、线性渐变在 Opera 下的应用

　　语法：

-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */

二 径向渐变

  语法：

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

 -webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

   

  

   

参考技术A

如果只要求兼容高级浏览器，CSS3可以解决。

<div class="box"></div>

.boxwidth: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手册里查到。

本回答被提问者和网友采纳