很多特殊的时候,我们向英雄们致敬,在互联网上最常见的方式就是整个网页变黑白,今天逛某博客收集一段代码,用于网页整体变黑白,用css3滤镜属性filter让网页马上变黑白,一行代码就搞定。

在你的css里加上以下代码即可,网页马上变黑白:

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

CSS3滤镜属性filter让网页变黑白的更多相关文章

  1. 兼容IE全版本及所有市面浏览器的网页变黑白处理方式

    大家应该有发现最近几天不少网站变成了黑白色,在哀悼日时,很多网站都需要全站变成黑白配色,今天对这个实现的技术做了一些探索性了解,在此进行一个记录分享. 使用的样式部分:下面的css部分想必大家应该都可 ...

  2. CSS3 grayscale滤镜图片变黑白实例页面

    在网站加入友情链接的LOGO时,因为不同logo颜色的问题,和主题色调可能产生冲突, 我选择用CSS3滤镜让logo变黑白,hover时变回原本的彩色 CSS代码: .gray { -webkit-f ...

  3. 巧用 CSS3 filter(滤镜) 属性

    原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...

  4. css3中强大的filter(滤镜)属性

    CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...

  5. css3 filter(滤镜)属性汇总与使用介绍,来源W3C

    实例 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(%); /* Chrome, Safari, Opera */ filter: g ...

  6. Filter Effects - 使用 CSS3 滤镜处理图片

    CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果.这里给大家分享的这个网站,大家可以体验下 CSS3 对图片的处理 ...

  7. 彩色网页变黑白色CSS代码变黑白色调!

    <style> html { -webkit-filter: grayscale(%); -moz-filter: grayscale(%); -ms-filter: grayscale( ...

  8. CSS3 滤镜Filter亮度动画

    CSS3 滤镜Filter亮度动画 -webkit-filter:brightness 值越高 亮度越亮<pre><!DOCTYPE html><html lang=&q ...

  9. filter: grayscale(100%)滤镜属性

    效果图: filter滤镜属性

  10. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

随机推荐

  1. Mybaties中的报错 Tag name expected解决

    有些时候一些小小的报错可能会没有注意到,等到报错的时候才发现,一个小小的细节也是很重要的,毕竟我们是bug生产员 来看报错的代码 when round((UNIX_TIMESTAMP(DATE_ADD ...

  2. jekins+svn

    1.jekins安装可以看jekins+shell随笔. 2.安装svn. yum -y install subversion 3.配置相关文件 mkdir   家目录 cd 到家目录修改conf下三 ...

  3. Zabbix3.4 安装配置

    第一.配置zabbix的yum源 # rpm -ivh http://repo.zabbix.com/zabbix/3.4/rhel/7/x86_64/zabbix-release-3.4-2.el7 ...

  4. JavaScript&TypeScript学习总结

    目录 一.JavaScript学习总结 1.什么是JavaScript 2.变量 3.变量命名 4.操作符 5.遍历语句 6.函数 7.对象 8.数组 二.TypeScript学习总结 1.什么是Ty ...

  5. 为win10添加右键“以管理员身份运行MSI”选项

    win+r运行regedit以打开注册表编辑器 定位到HKEY_CLASSES_ROOT\Msi.Package\shell 右键shell,新建 项 项名称为runas 双击runas右边的默认,填 ...

  6. vue.cli的安装配置

    关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli. 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue ...

  7. pyg安装

    pyg官网:pytorch_geometric documentation (pytorch-geometric.readthedocs.io) win安装pyg各种报错,原因在于pytorch和py ...

  8. while循环内使用for循环

    一个基础问题,while循环内使用for循环,且当for循环内有控制while循环条件时. 如下所示: bool flag = true; while(flag) { for(i=0;i<10; ...

  9. top单核与32C--CPU爆表

    linux的cpu使用频率是根据cpu个数和核数决定的 top, 然后你按一下键盘的1,这就是单个核心的负载,不然是所有核心的负载相加,自然会超过100 单核为100%,服务器是32核的,下面基本用了 ...

  10. mysql报错:MySQL server has gone away

    一.报错提示: 二.报错原因: 原因一: 一种可能是发送的 SQL 语句太长,以致超过了 max_allowed_packet 的大小,如果是这种原因,你只要修改 my.cnf,加大 max_allo ...