css做渐变背景色集结

css-body背景渐变色的CSS

一、从上往下渐变 

body{ 

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000); 

} 

二、从左上至右下渐变 

body{ 

FILTER: Alpha( style=1,opacity=25,finishOpacity=100, 

startX=50,finishX= 100,startY=50,finishY=100); 

background-color: skyblue; 

} 

三、从左往右渐变 

body{ 

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000); 

} 

四、从上往下渐变 

style="filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);"  

怎么设置网页背景为渐变色？ 

　　从上到下渐变和从左到右渐变的方法一样。

　　只不过在CSS把repeat-y换成repeat-x

　　repeat-x的意思就是沿着x轴平铺图片的意思。

　　--

　　网页背景色渐变

　　情况一：

　　是用一个1像素高的，200像素宽的

　　细长图片平铺出来的。

　　比如CSS代码

　　body{background:rul(tupian.jpg) #FFF repeat-y;}

　　情况二：

　　或者是1像素宽，200像素高的图片平铺出来的。

　　body{background:rul(tupian.jpg) #FFF repeat-x;}

　　。

　　上面两个情况里的图片的200宽是假设的。

　　你可以做成100宽也没什么。

　　比如网页是780像素宽。我用第一个情况，

　　我那长1像素高的细长图片是由粉红过度到纯白

　　左面粉红，右面纯白。

　　然后把网页背景色设定成纯白#FFF，

　　这样左面200像素是图片平铺产生的粉红。

　　到200像素以后是背景色白。

　　读者看起来是网页左面是粉红，均匀的渐变到右面。

　　--

　　关键：网页宽度是780像素，而我做的图片是200像素。

　　网页左面的200像素是图片平铺产生的颜色，

　　而其余的580像素是背景色设定出来的。

　　--

　　用photoshop做图片的时候，要把渐变的一面色设定成

　　网页的背景色。

　　这样读者在网页上就看起来很自然了。

　　而且不会出现由于显示器屏幕大小不同，图片要改的问题