GIS君-Manchan's blog GIS君-Manchan's blog
首页
  • 前端文章

    • HTML5
    • CSS3
    • JavaScript
  • 学习笔记

    • CSS选择器世界
地信
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 旧版博客
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

まん酱/GIS君

一个正在学习中的GISer~
首页
  • 前端文章

    • HTML5
    • CSS3
    • JavaScript
  • 学习笔记

    • CSS选择器世界
地信
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 旧版博客
  • 学习
  • 面试
  • 心情杂货
  • 实用技巧
  • 友情链接
关于
收藏
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 旧版博客
  • 学习

  • 面试

  • 心情杂货

  • 实用技巧

    • 2分钟规则
    • 网站快速变灰
      • 代码
      • 原理
    • Markdown首行缩进
  • 友情链接
  • 更多
  • 实用技巧
GIS君-manchan
2022-12-01
目录

网站快速变灰

在伟人离世或者重大悼念活动时,网站往往会全面变灰,包括文字、图片等等,文字颜色、背景颜色可以通过调整CSS进行改变,但是图片重新制作是很耗费时间,而通过CSS滤镜可以使网页快速变灰。

# 代码

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}
1
2
3
4
5
6
7

# 原理

CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

filter的子属性grayscale()可以对图片进行灰度转换,当值为 100% 时,灰度最大。0% 时与原图没有区别。0% 到 100% 之间的值会使灰度线性变化。

将filter属性放在根元素<html>上,确保整个页面全部变灰。

微信 支付宝
文章更新于: 2022/12/01 16:04:41
2分钟规则
Markdown首行缩进

← 2分钟规则 Markdown首行缩进→

最近更新
01
前端面试学习
01-02
02
Markdown首行缩进
12-01
03
缅怀 | 加强测绘工作 发展地理信息产业
12-01
更多文章>
Theme by Vdoing | Copyright © 2020-2023 Manchan All rights reserved.
鄂ICP备2020015911-1号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式