您当前的位置:主页 > 教程合集 > Html/css网站首页Html/css

将网页变成黑白灰色调CSS代码推荐

发布时间:2017-10-28编辑:余斗阅读:(0)字号:
    在网页制作的过程中,我们有时候根据特殊的需求,会将网页的整体或局部编程灰色,一般应用在哀悼日、活动过期等需求上,这个时候,如果重写css样式,则显得臃肿。今天余斗给大家推荐几种全局css代码,专门用于将网页界面变成黑白灰色调,大家根据自己的具体情况选取: 一、全局外部样式

    html {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
    }
     
    二、内部样式(写入头部head标签里面)

    <style type="text/css">
    <!--
    html {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);}
    -->
    </style>
     
    三、内联式(写入html标签)

    <html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);">
     
    四、QQ群空间版,针对大部分主流浏览器(写入.css文件)

    html {-webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }
     
    注意的是,以上css代码都是运用于全局,大家若是想要运用到局部界面,可以直接写到对应的class类名中即可。
关键字词CSS黑白灰
余斗余斗
  1. 转载请注明:将网页变成黑白灰色调CSS代码推荐
  2. 版权声明:本站原创文章,由发表在Html/css分类下,于2017-10-28最后更新
移动站上引用优酷视频时候自适应的解决方法
纯CSS实现背景透明,文字不透明的方法
手机扫一扫 随身带着看
鸿运国际手机登录首页