码迷,mamicode.com
首页 > Web开发 > 详细

CSS实现兼容性的渐变背景(gradient)效果

时间:2015-08-11 17:43:13      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

利用css 3实现渐变可以很方便的更改它的颜色,并且能够减少图片的制作,但是它的兼容性并不好,下面的代码就是实现利用css 渐变兼容的代码:

.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);
    -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浏览器下的渐变背景实现 */
    background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); /* Opera浏览器下的渐变背景 */
}

<div class="gradient"></div>

实现的效果如下图:

技术分享

具体的使用说明可查看张鑫旭博客地址:http://www.zhangxinxu.com/wordpress/?p=743



CSS实现兼容性的渐变背景(gradient)效果

标签:

原文地址:http://www.cnblogs.com/sese/p/4721458.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!