• css 背景色渐变---和背景色透明


    1 背景色渐变

     

       background:#fb0000;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fb0000), color-stop(15%,#d50000), color-stop(75%,#c70000), color-stop(100%,#b20000));
        background: -webkit-linear-gradient(top,   #fb0000 0%,#d50000 15%,#c70000 75%,#b20000  100%);
        background: linear-gradient(to bottom,  #fb0000 0%,#d50000 15%,#c70000 75%,#b20000 100%);

    2 背景色 透明

    {  
          filter:alpha(opacity=50);  
          -moz-opacity:0.5;  
          -khtml-opacity: 0.5;  
          opacity: 0.5;  
    }   

    还有背景色rgb的最后一个变量是可以控制透明度的。

    {
       background:rgb(207,0,0,0.8);
    }

    3 ie渐变

    参考网址:http://www.qttc.net/201304316.html;

    CSS3新加特性gradient可以实现背景颜色,鉴于各浏览器之间还有兼容性因此这里只说线性渐变,其它渐变就算是有也不敢贸然使用。

    Mozilla

    仅针对FireFox

    
    background: -moz-linear-gradient(top, #eee, #aaa);

    linear 表示线性,参数top表示从顶部开始,参数#eee表示开始颜色,#aaa表示结束颜色

    效果:

    Webkit

    解决:Chrome 、Safari

    background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa));

    linear 表示线性、0 0 表示开始位置的x与y的位置,0 100%表示结束的x与y位置,from(#eee)表示从这个颜色开始,to(#aaa)表示渐变到这个颜色

    Chrome:

    Safari:

    Opera

    代码:

     
    background: -o-linear-gradient(top, #eee, #aaa);

    同Mozilla一样用法,只不过前缀-moz修改成-o即可

    效果:

    IE9 and IE 10

    代码:

    background: -ms-linear-gradient(#eeeeee 0%,#aaaaaa 100%);

    #eeeeee 0% 表示从什么颜色位置开始,#aaaaaa 100%表示到什么颜色以及结束位置

    IE9:

    IE10:

    IE7 and IE8

    这个两个浏览器使用的事滤镜,跟CSS3没有半毛关系,只不过能在低端IE中解决这个问题也是解决兼容的一个做法,但注意不要大量使用,耗资源!

    IE7代码:

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1);

    startColorstr开始颜色,endColorstr结束颜色,grandientType渐变方向

    IE7效果:

    IE8代码:

    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1);

    参数同IE7类似,只不过在filter加了一个-ms-前缀

    IE8效果:

    整合兼容

    我们把各个浏览器的背景颜色渐变都写上就解决各浏览器间的背景颜色渐变了

    background: -webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#aaa)); /** Chrome Safari **/
    background: -moz-linear-gradient(top, #eee, #aaa); /** FireFox **/
    background: -o-linear-gradient(top, #eee, #aaa);  /** Opear **/
    background: -ms-linear-gradient(#eeeeee 0%,#aaaaaa 100%);  /** IE9 IE10 **/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1); /** IE7 **/
    -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee',endColorstr='#aaaaaa',grandientType=1); /** IE8 **/

    但为了要一个通用的背景渐变要写六行代码,不见得比图片省事,要么也可以结合后端语言做一个功能,输入渐变的起始颜色与结束颜色后生成以上代码。

  • 相关阅读:
    centos7 安装jmeter5.1
    centos7 安装jdk1.8
    es6学习笔记(一)环境搭建
    Django-filter报错:__init__() got an unexpected keyword argument 'name'
    django fields lookup methods(lookup类型)
    django笔记-model
    Git-简单使用
    jenkins-master-slave节点配置总结
    Git-简单使用
    MySQL explain详解
  • 原文地址:https://www.cnblogs.com/xiaoxiao2014/p/4562570.html
Copyright © 2020-2023  润新知