zoukankan      html  css  js  c++  java
  • 网站整体变灰(黑白、置灰)原理

    一、前言
    在很多时候我们需要把整个网站变灰,比如“汶川地震”。近日受降雨影响四川茂县突发山体高位垮塌,想起了曾经的汶川地震。来看看网站是如何实现整体变灰的。

    二、CSS3 filter(滤镜) 属性
    html{
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
    }
    filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。

    浏览器支持:

    grayscale():

    将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0。

    来看一下效果:

    可以看到,网页中的图片、css样式、视频都已经变灰。

    三、IE浏览器
    上面所说的css3属性IE浏览器并不支持,其实这样做已经覆盖了大部分浏览器

    filter: gray;
    这个属性直接加载html上是不管用的,如果需要图片变灰可以只将样式作用于img标签,或者用*通配符作用于所有元素,这样整个网站就会变灰。

    经测试,在IE7-9都是没问题的,IE9以上不能生效。

    四、通用方案
    如果你执意所有的浏览器都有这个效果,可以通过Greyscale.js实现:

    在页面引入js文件:

    <script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
    然后:

    grayscale(document.getElementsByTagName("img"));
    或者直接这样:

    grayscale(document.getElementsByTagName("html"));
    实现原理:IE浏览器下是添加灰度滤镜,这个大家都懂的。其他浏览器貌似使用Canvas中的getImageData方法,然后对每个像素点进行灰度转换。

    因此,在现代浏览器下,对于该方法,图片的灰度处理有两个局限性:
    1. 速度。300*300这张一般般大小的图片变灰就要数秒之久;
    2. 跨域。安全性机制,无法转换跨域的图片为黑白色。

  • 相关阅读:
    Row size too large. The maximum row size for the used table type 解决
    pandas Series介绍
    Scala核心编程_第08章 面向对象编程(中高级部分)
    mysql增删改字段,重命名替换字段
    python报错ValueError: cannot reindex from a duplicate axis
    pandas DataFrame 数据筛选
    Scala核心编程_第07章 面向对象编程(中级部分)
    Scala核心编程_第06章 面向对象编程(基础部分)
    《The Rise and Fall of Scala》scala兴衰读后感
    信贷业务(Ali)
  • 原文地址:https://www.cnblogs.com/huxiaoyi/p/12630262.html
Copyright © 2011-2022 走看看