css背景颜色渐变

1.效果

2.代码

        /* 基本色 */
	background: #3FB0AC;
	/* chrome 2+, safari 4+; multiple color stops */
	background-image:-webkit-gradient(linear,  left top, left bottom, color-stop(1, #3FB0AC), color-stop(1, #C5D7A1));
	/* chrome 10+, safari 5.1+ */
	background-image: -webkit-linear-gradient(#3FB0AC,#C5D7A1);
	/* firefox; multiple color stops */
	background-image: -moz-linear-gradient(top,#3FB0AC,#C5D7A1,#C5D7A1);
	/* ie 6+ */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3FB0AC', endColorstr='#C5D7A1');
	/* ie8 + */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3FB0AC', endColorstr='#C5D7A1')";
	/* ie10 */
	background-image: -ms-linear-gradient(#3FB0AC, #C5D7A1);
	/* opera 11.1 */
	background-image: -o-linear-gradient(#3FB0AC, #C5D7A1);
	/* 标准写法 */
	background-image: linear-gradient(#3FB0AC, #C5D7A1);

3.问题

亲测以上方式在firefox31下不可行,求高人给出firefox可行方案

我的个人博客:http://blog.caicongyang.com ;

我的个人网站:http://www.caicongyang.com ;

我的CSDN博客地址: http://blog.csdn.net/caicongyang ;

时间: 2024-10-11 02:36:49

css背景颜色渐变的相关文章

css3中背景颜色渐变(转)

原文链接:http://caibaojian.com/css3-background-gradient.html 整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的详细解释. via在项目中,有很多地方都用到了背景线性渐变.如果在移动端还可以适当使用CSS3这个属性原文来自:http://caibaojian.com/css3-background-gradient.html css3:linear-gradient 比如:黑色渐变到白色,代码如下: .gradient{ ba

css3的背景颜色渐变@线性渐变

背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); opera浏览器    background: -o-linear-gradient(position/deg,startColor,endColor); safari和chrome浏览器    background: -webkit-linear-gradient(position/deg,startCo

CSS背景颜色、背景图片、平铺、定位、固定

CSS背景颜色设置 background-color:red;如设置背景颜色为红色: 背景颜色设置支持3种写法: 颜色名 16进制 rgb CSS背景图片颜色设置 background-image:url(图片地址);如设置背景图片 路径不在说明了! CSS背景图片平铺设置(如果不设置图片默认设置为x轴y轴同时平铺即值为repeat) background-repeat:repeat-x;如设置x轴平铺: background-repeat:no-repeat如设置不平铺: CSS背景图片定位设

css3背景颜色渐变属性 兼容性测试基础环境为:windows系统;IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

css3背景颜色渐变属性 兼容性测试基础环境为:windows系统:IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+ 语法: <linear-gradient>:linear-gradient([ <point>,]? <color-stop>[, <color-stop>]+); <point>:[ left | right ]? [ top | bottom ]? || <a

VC 实现视图区背景颜色渐变填充

[cpp] view plaincopy void CSTest1View::OnDraw(CDC* pDC) { CSTest1Doc* pDoc = GetDocument(); ASSERT_VALID(pDoc); // TODO: add draw code for native data here CRect rcClient; GetClientRect(&rcClient); rcClient.DeflateRect(5,5,5,5); if(m_nMode==0) { TRIV

CSS背景颜色属性值转换

<!DOCTYPE html> <html><head><meta charset="UTF-8"> <title>CSS背景颜色属性值转换</title> <style type="text/css"> .top_tips { position:relative; width:1000px; margin:20px auto; padding:10px; color:#272727

背景颜色渐变

背景颜色线性渐变[ linear-gradient] 语法: background:linear-gradient(起点,起点颜色,过度色[可选],终点颜色); 起点:top是从上到下.left是从左到右,如果定义成left top,那就是从左上角到右下角. 过度色:可以插入多个,表示多种颜色的渐变 demo <style type="text/css" rel="stylesheet"> .box{ width: 100px; height: 100p

css3背景颜色渐变属性

https://www.cnblogs.com/ningkyolei/p/4623697.html 很久之前写的一篇文章了,今天重新整理一下关于css3背景渐变的写法,至于是怎么来的,可以看下面渐变的详细解释. 在项目中,有很多地方都用到了背景线性渐变.如果在移动端还可以适当使用CSS3这个属性 css3:linear-gradient 比如:黑色渐变到白色,代码如下: .gradient{ background: -moz-linear-gradient(top, #000000 0%, #f

利用rgba和filter设置CSS背景颜色半透明且不影响子元素,兼容IE6-8

目的需要,需要一个背景半透明的效果,于是马上想到"opacity:0.5″等等,为兼容IE可能还会用到filter,如: filter:alpha(opacity=50); -moz-opacity:0.50; opacity:0.50; 上面的是可以达到半透明的效果,但是会影响里面的子元素也半透明,例如DIV里面的文字也半透明了,这不是我想要的 上英文google.com翻阅半天,稍加总结和修改,终于功夫不负有心人,实现了可以兼容各浏览器,达到背景颜色半透明而不影响子元素的代码,如下: bac