• 技术文章 >web前端 >css教程

    用CSS将网页变黑白

    php中世界最好的语言php中世界最好的语言2018-03-21 17:10:20原创3649
    这次给大家带来用CSS将网页变黑白,用CSS将网页变黑白的注意事项有哪些,下面就是实战案例,一起来看一下。

    方法如下:

    这段CSS代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装。

    html{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    }

    如果你的页面中没有HTML标签,记得加进去,可以加以下HTML5标签,或者更换上面的CSS标签的html为body或者其它。

    <!DOCTYPE html>
    <html>
    </html>

    有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的<object …>和</object>之间插入:

    <param value="false" name="menu"/>
    <param value="opaque" name="wmode"/>

    如果某些带有Flash的页面仍显示彩色,或浏览器上下滚动条拖动时Flash FLV播放器变花(例如剑网3、剑侠世界官网分流页),将Flash改为JS输出(本例为SWFObject):

    <script type="text/javascript" src="/js/swf.js"></script>
    <p id="video_content"></p>
    <script type="text/javascript">
    <!--
    var video_player_so = new SWFObject("video-542.swf", "sotester", "439", "246", "7");
    video_player_so.addParam("wmode", "opaque");
    video_player_so.addParam("allowfullscreen","true");
    video_player_so.addParam("allowscriptaccess","always");
    video_player_so.write("video_content");
    //-->
    </script>

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    CSS的Selector使用详解

    详解CSS之margin的特殊使用技巧

    以上就是用CSS将网页变黑白的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

    前端(VUE)零基础到就业课程:点击学习

    清晰的学习路线+老师随时辅导答疑

    自己动手写 PHP MVC 框架:点击学习

    快速了解MVC架构、了解框架底层运行原理

    专题推荐:样式表 css 黑白
    上一篇:用CSS将网站变黑白 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• ❤️‍🔥接口自动化测试不想写代码?• 实例详解CSS渐变锯齿问题如何解决!• 带你吃透Flex布局的三个属性:flex-grow、flex-shrink、flex-basis• 另辟蹊径!看看使用CSS滤镜怎么构建圆角和波浪效果• 聊聊怎么利用 CSS 构建花式透视背景• 详解css中的比较函数(示例介绍)
    1/1

    PHP中文网