css3线性渐变背景色（css3 background-image linear-gradient渐变色 transition 无效）

本文目录

• css3 background-image linear-gradient渐变色 transition 无效
• 怎样用css实现网页背景颜色渐变
• CSS3样式中如何让背景渐变与背景图片共存
• 使用div+css实现背景颜色渐变，怎么实现呢
• CSS3设置border某一边的颜色渐变
• 求css 大神解释一下下列代码

css3 background-image linear-gradient渐变色 transition 无效

在开发过程中遇到一个需求，要实现渐变色的背景之间的过渡切换，而css3的transition属性对于background-image不生效

想了很久之后，想到一个办法，利用两个div来设置不同的渐变的背景色，再通过改变div的透明度，实现渐变色之间的过渡，效果还不错

（图片被压缩了效果看起来没这么好，可以点击查看原图）

怎样用css实现网页背景颜色渐变

• 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); /* 标准的语法 */

}

CSS3样式中如何让背景渐变与背景图片共存

目前，对CSS3支持日趋完善，实现兼容性的渐变背景效果是完全可以的，让背景渐变与背景图片共存的方法很简单，主要要注意的是图片要 保持“最小单元”的准则，选择正确的浏览器，该问题就能得到解决，下面介绍一下具体的解决方法。

1、图片渐变切图时一定要以最小为准则，例如在做垂直方向的纯颜色的渐变时，尝试使用1个像素的竖直图片作为渐变背景“最小单元”。另外，要注意css3虽然支持很多的浏览器的兼容，但是目前不支持Opera浏览器。

2、如果兼容程度允许的话，纯色渐变背景可以使用css3的渐变样式，如{background: linear-gradient(left top, red , blue);}，如此一来能够减少切图量，还可以加快网页加载速度，缺点是使用主流浏览器的话，就必须要添加前缀。

3、注意对于webkit核心的浏览器，如Chrome/Safari浏览器，在这些浏览器下要做到渐变背景，也需要使用CSS3 渐变方法，css-gradient，具体就是-webkit-gradient，使用语Firefox浏览器业是有一点差异的。

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

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

一、线性渐变：

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

　　语法：

     -moz-linear-gradient( * )

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

　　语法： 

-webkit-linear-gradient( * )//最新发布书写语法

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

　　语法：

-o-linear-gradient(); /* Opera 11.10+ */

二 径向渐变

  语法：

-moz-radial-gradient(*);

 -webkit-radial-gradient(*);

CSS3设置border某一边的颜色渐变

如图所示，渐变的边框是一个 li 标签，要给他的 border-bottom 设置颜色渐变。

background-image 中的第一个 linear-gradient 是设置 li 标签的背景色的，
第二个 linear-gradient 配合 border-image 即可设置 border 的渐变色。

求css 大神解释一下下列代码

它这个是设置背景颜色的，都是同一个意思，表示背景为从左往右的渐变色，渐变范围是从#003500到#008800；
由于背景颜色渐变是一个CSS3的样式，所以在这段代码里面，它用了五行来指代不同的浏览器，前面两行是专属于webkit内核的浏览器，例如chrome，第三行是专属于firefox的，第四行是专属于IE的，当然它也只能在IE9以上的版本里面生效，最后一行是专属于opera浏览器的。
不过其实这段代码只是过去的写法，现在看来已经有点过时了。对于chrome、firefox、IE9及以上的版本，现在都已经能够比较好地支持背景渐变色的样式了，也不需要添加浏览器的选择符。上面这段代码简写成一行：
background:linear-gradient(left, #003500, #008800);
即可~