专栏首页前端说吧CSS-背景渐变的兼容写法

CSS-背景渐变的兼容写法

background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
    background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
    background-image: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
    background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%);
linear-gradient:to 方位词
-前缀-linear-gradient:方位词


最近在做的项目中用到的实例(2016-12-13 13:53:11)
background: -webkit-linear-gradient(bottom, #fba555, #ffed6c 75%);
background: -moz-linear-gradient(bottom, #fba555, #ffed6c 75%);
background: -ms-linear-gradient(bottom, #fba555, #ffed6c 75%);
background: -o-linear-gradient(bottom, #fba555, #ffed6c 75%);
background: linear-gradient(to top, #fba555, #ffed6c 75%);

20180307 补充代码:

qq浏览器效果如下:

ie8浏览器效果如下:

html

<div class="zhang1"></div>
<div class="zhang2"></div>
<div class="myself1"></div>
<div class="myself2"></div>
<div class="myself3"></div>
<div class="myself4"></div>

css

div{
            height: 50px;
            width: 1000px;
            margin: 20px auto;
            border-radius: 30px;
        }
        .zhang1{
            height: 80px;
        background:red; /* 一些不支持背景渐变的浏览器 */  
            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=1);
        -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=1);/*IE8 gradientType=1代表横向渐变,gradientType=0代表纵向淅变。*/    
        background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));  
        background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));  
        background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
        }
        .zhang2{
            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));  
        background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));  
        background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5)); 
        }
        .myself1{
            background: #779DFF;
            filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#779DFF,endcolorstr=#1E47B1,gradientType=1);/*IE8*/
        -ms-filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#779DFF,endcolorstr=#1E47B1,gradientType=1);/*IE8*/
            background: -webkit-linear-gradient(left, #779DFF, #1E47B1 100%);
            background: -moz-linear-gradient(left, #779DFF, #1E47B1 100%);
            background: -ms-linear-gradient(left, #779DFF, #1E47B1 100%);
            background: -o-linear-gradient(left, #779DFF, #1E47B1 100%);
            background: linear-gradient(to right, #779DFF, #1E47B1 100%);
        }
        .myself2{
            background: #4574EF;
            filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#4574EF,endcolorstr=#0C3399,gradientType=1);/*IE8*/
        -ms-filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#4574EF,endcolorstr=#0C3399,gradientType=1);/*IE8*/
            background: -webkit-linear-gradient(left, #4574EF, #0C3399 100%);
            background: -moz-linear-gradient(left, #4574EF, #0C3399 100%);
            background: -ms-linear-gradient(left, #4574EF, #0C3399 100%);
            background: -o-linear-gradient(left, #4574EF, #0C3399 100%);
            background: linear-gradient(to right, #4574EF, #0C3399 100%);
        }
        .myself3{
            background: #9E42C7;
            filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#9E42C7,endcolorstr=#650E8D,gradientType=1);
        -ms-filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#9E42C7,endcolorstr=#650E8D,gradientType=1);IE8 
            background: -webkit-linear-gradient(left, #9E42C7, #650E8D 100%);
            background: -moz-linear-gradient(left, #9E42C7, #650E8D 100%);
            background: -ms-linear-gradient(left, #9E42C7, #650E8D 100%);
            background: -o-linear-gradient(left, #9E42C7, #650E8D 100%);
            background: linear-gradient(to right, #9E42C7, #650E8D 100%);
        }
        .myself4{
            background: #D33B76;
            filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#D33B76,endcolorstr=#8D094D,gradientType=1);
        -ms-filter:alpha(opacity=100) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#D33B76,endcolorstr=#8D094D,gradientType=1);/*IE8 */    
            background: -webkit-linear-gradient(left, #D33B76, #8D094D 100%);
          background: -moz-linear-gradient(left, #D33B76, #8D094D 100%);
            background: -ms-linear-gradient(left, #D33B76, #8D094D 100%);
            background: -o-linear-gradient(left, #D33B76, #8D094D 100%);
            background: linear-gradient(to right, #D33B76, #8D094D 100%);
        }
张鑫旭教程

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS-项目中遇到IE兼容问题,处理随笔

    xing.org1^
  • CSS-自定义高度的元素背景图如何自适应以及after伪类在ie下的处理

    xing.org1^
  • CSS3的transition动画功能

    xing.org1^
  • 如何给女朋友解释什么是分布式和集群?

    某天,下班较早,我正在玩吃鸡,已经到决赛圈了,这时候,女朋友满脸求知欲的朝我走过来。

    Java团长
  • 漫话:如何给女朋友解释什么是分布式和集群?

    某天,下班较早,我正在玩吃鸡,已经到决赛圈了,这时候,女朋友满脸求知欲的朝我走过来。

    掌上编程
  • ASP.NET MVC以ValueProvider为核心的值提供系统: DictionaryValueProvider

    NameValueCollectionValueProvider采用一个NameValueCollection作为数据源,DictionnaryValuePro...

    蒋金楠
  • HackerOne优秀白帽黑客采访系列-Rachel Tobac

    Rachel Tobac,@RachelTobac,用户体验研究者(UX Researcher)和社工黑客,曾是社会工程安全测试公司SocialProof Se...

    FB客服
  • 实现物流场景中小车Marker指向目的地

    快递物流相关APP中,如快递、送餐,可以让快递车Marker的车头,在途经点始终指向目的地,如下图所示:

    腾讯位置服务
  • 我的AI之路 —— OCR文字识别快速体验版

    还记得前一阵某小盆友拿过来一个全是图片的ppt,让我把里面的文字给抠出来(我当时很震惊!!!),随后在网上随便找了个OCR的在线文档转换软件,就给转过来了——这...

    用户1154259
  • 二分图相关定理

    定义:若选择一个点说明选择与它相连的所有边,最小顶点覆盖就是选择最少的点来覆盖所有的边。

    attack

扫码关注云+社区

领取腾讯云代金券