CSS背景渐变

Posted 2023-05-13

我想问一下用CSS来控制背景渐变的代码是什么哦？

回答问题的兄弟请看一下这个网站，就是要跟这个网站渐变一样的，后面那一块绿色的渐变。
可以跟我说一下吗？谢谢！

http://www.chhht.com/zh%2DCN/index.asp

我看不了你的链接，不过渐变我可以说一下：

你做一张渐变的图片，然后通过背景写进去，
background:url();
技巧是，这张渐变图片很大，你要把他切成一张高或者宽只有一像素的小图，为什么呢？
线性渐变一般都有规律，横向或者纵向，你根据渐变的规律尽量让图片最小，以横向图片为例（举列一张100*100的图片）：
图片从左到右的方向渐变，那宽度就是100，
图片的从顶端垂直方向到底端，它所有的颜色都是重复的，那我只需要一个像素的高度然后重复的纵向填充就可以了，所以高度就是1。
所以切出来的图片尺寸是100*1

然后通过css加载进来，
.div
width:100px;
height:100px;
background:url(图片的路径) repeat-y;

那图片就自动纵向铺开了！ 参考技术A 一楼正解，你的这个网站是横向平铺而已，这是相当容易的一个知识点

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

请给出完整代码！谢谢！

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实现，只能用图片代替