很多特殊的时候,我们向英雄们致敬,在互联网上最常见的方式就是整个网页变黑白,今天逛某博客收集一段代码,用于网页整体变黑白,用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. ASP中把数据导出为Excel的三种方法

    方法一:用excel组件 这种方法利用Excel组件直接导出excel文件,要求服务器端安装有微软office(Excel)程序,否则无法运行. 完整示例如下: Set conn=server.Cre ...

  2. linux部署nacos集群

    linux部署nacos集群 一.简介: 什么是Nacos Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service的首字母简称,一个更易于 ...

  3. Linux学习 --- 系统网络配置

    前言 : 如果一台计算机想接入互联网,必须配置好IP地址,子网掩码,网关,DNS服务器.在Linux系统中,这些信息都可以修改对应的配置文件来进行配置.临时配置一下网络可以使用一些简单的命令来进行配置 ...

  4. (已解决)富文本编辑器:使用layui的layedit怎么回显存放在数据库里的富文本数据(包含有图片base64码)?

    1. 背景 我把富文本内容从后台导入到前端,回显在layui的layedit里面. 2. 步骤 直接在<textarea></textarea>中间进行赋值(我用的是模板赋值) ...

  5. 小白之Linux基础命令

    命令大全 : http://man.linuxde.net/touch --------------------------20170802晚linux ls--显示当前路径下的文件及文件夹名字cd ...

  6. flask框架的使用

    在学习了DJango后,又学习FLASK框架,刚入手的感觉就是好简单啊,简单的7行代码,就能搭建一个简单的WEB服务器. from flask import Flask app = Flask(__n ...

  7. 25_Webapck原理

    Webpack源代码解析 webpack其实也就是一个函数的调用,返回一个Compile的对象,再调用Compile的run方法就可以完成项目的构建 那么我们肯定是先要从webpack这个函数去理解它 ...

  8. Python学习笔记(五)if分支语句

    一.if语法 示例: 1 money = int(input('请输入余额:')) 2 if money >= 5: 3 print('买得起!') 4 5 if True: 6 print(' ...

  9. 活动 | Cloud Ace 受邀参加中国智造出海数字科技峰会

    [Cloud Ace 是谷歌云全球战略合作伙伴,拥有 200 多名工程师,也是谷歌最高级别合作伙伴,多次获得 Google Cloud 合作伙伴奖. 作为谷歌托管服务商,我们提供谷歌云.谷歌地图.谷歌 ...

  10. 【博客】如何在Github上创建博客

    [博客]如何在Github上创建博客 1. 安装nodejs windows安装npm教程--nodejs 2. 安装hexo npm install -g hexo-cli 3. 搭建博客 $ he ...