CSS filter(滤镜)属性,并实现页面置灰效果

目录

一、filter(滤镜)属性

二、准备工作

三、常用的filter属性值

1、blur(px)

2、brightness(%)

3、contrast(%)

4、grayscale(%)

5、opacity(%)

6、saturate(%)

7、sepia(%)

8、invert(%)

9、hue-rotate(deg)

10、drop-shadow(h-shadow v-shadow blur spread color)

四、网站置灰效果


一、filter(滤镜)属性

CSS 中的filter属性,用来设置元素的模糊度、灰度、对比度、透明度等视觉效果;

二、准备工作

准备一个html页面,用来编码测试;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img-box {
            display: inline-block;
            margin-top: 20px;
            margin-left: 100px;
        }
        .image{
            width: 200px;
        }
        /* 效果图样式 */
        .img-test{
        }
    </style>
</head>

<body>
    <div class="img-box">
        <h4>原图</h4>
        <img class="image" src="D:\test\girl.png"  alt="">
    </div>
    <div class="img-box">
        <h4>效果图</h4>
        <img class="image img-test" src="D:\test\girl.png" alt="">
    </div>
</body>

</html>

在页面中放两个相同的图片;

通过测试图与原图的对比,可以更加清楚的观察设置了各种filter属性值的效果;

三、常用的filter属性值

序号

属性值

描述
1none默认值,不设置任何效果;
2initial设置为默认值;
3inherit继承父元素的该属性值
4blur(px)

设置图像的高斯模糊;

5brightness(%)设置图像的亮度;
6contrast(%)设置图像的对比度;
7grayscale(%)设置图像灰度;
8opacity(%)设置图像的透明度;
9saturate(%)设置图像的饱和度;
10sepia(%)设置图像的深褐色转换比例;
11invert(%)设置图像的反转比例;
12hue-rotate(deg)设置图像的色相旋转;
13drop-shadow(h-shadow v-shadow blur spread color)设置图像阴影效果;

1、blur(px)

该函数用来设置图像的高斯模糊效果; 

  • 默认值为0(无变化);
  • 值越大,图像越模糊;
  • 不接受百分比;
/* 效果图样式 */
.img-test{
    /* 1、设置高斯模糊 */
    -webkit-filter: blur(3px); /* Chrome, Safari, Opera */
    filter: blur(3px);
}

/* 效果图样式 */
.img-test{
    /* 1、设置高斯模糊 */
    -webkit-filter: blur(6px); /* Chrome, Safari, Opera */
    filter: blur(6px);
}

2、brightness(%)

该函数用来设置图像的亮度,使其看起来更亮或更暗;

  • 默认值为100%(无变化);
  • 值越大,图像亮度越高;
  • 值是0%,图像会全黑;
  • 值超过100%,图像会比原来更亮;
/* 效果图样式 */
.img-test{
    /* 2、设置亮度 */
    -webkit-filter: brightness(60%); /* Chrome, Safari, Opera */
    filter:brightness(60%)
}

/* 效果图样式 */
.img-test{
    /* 2、设置亮度 */
    -webkit-filter: brightness(120%); /* Chrome, Safari, Opera */
    filter:brightness(120%)
}

3、contrast(%)

该函数用来设置图像的对比度;

  • 默认值100%(无变化);
  • 值越大,对比度越低;
  • 值是0%,图像会全黑;
  • 值超过100%,对比度会比原来的更低;
/* 效果图样式 */
.img-test{
    /* 3、设置图片对比度 */
    -webkit-filter: contrast(60%); /* Chrome, Safari, Opera */
    filter: contrast(60%);
}

/* 效果图样式 */
.img-test{
    /* 3、设置图片对比度 */
    -webkit-filter: contrast(120%); /* Chrome, Safari, Opera */
    filter: contrast(120%);
}

4、grayscale(%)

该函数用来设置图像的灰度,定义图像灰度的转换比例;

  • 默认值为0(无变化);
  • 取值在0%到100%之间;
  • 值越大,灰度效果越明显;
  • 值是100%,则完全转换为灰度图像;
/* 效果图样式 */
.img-test{
    /* 4、设置图像灰度 */
    -webkit-filter: grayscale(60%); /* Chrome, Safari, Opera */
    filter:grayscale(60%)
}

/* 效果图样式 */
.img-test{
    /* 4、设置图像灰度 */
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter:grayscale(100%)
}

5、opacity(%)

该函数用来设置图像的透明程度,定义图像透明度的转换比例;

  • 默认值为100%(无变化);
  • 取值在0%到100%之间;
  • 值越小,透明程度越明显;
  • 值为0%,则完全透明;
/* 效果图样式 */
.img-test{
    /* 5、设置图像的透明度 */
    -webkit-filter: opacity(20%); /* Chrome, Safari, Opera */
    filter: opacity(20%);
}

/* 效果图样式 */
.img-test{
    /* 5、设置图像的透明度 */
    -webkit-filter: opacity(60%); /* Chrome, Safari, Opera */
    filter: opacity(60%);
}

6、saturate(%)

该函数用来设置图像的饱和度,定义图像饱和度的转换比例;

  • 默认值为100%(无变化);
  • 值越小,饱和度越低,反之,饱和度越高;
  • 值为0%,则完全不饱和;
  • 值可以超过100%,设置更高的饱和度;
/* 效果图样式 */
.img-test{
    /* 6、设置图像的饱和度 */
    -webkit-filter: saturate(60%); /* Chrome, Safari, Opera */
    filter: saturate(60%);
}

/* 效果图样式 */
.img-test{
    /* 6、设置图像的饱和度 */
    -webkit-filter: saturate(160%); /* Chrome, Safari, Opera */
    filter: saturate(160%);
}

7、sepia(%)

该函数用来设置图像转换为深褐色的转换比例;

  • 默认值为0%(无变化);
  • 取值在0%-100%之间;
  • 值越大,转换为深褐色的程度越大;
  • 值为100%,则完全是深褐色;
/* 效果图样式 */
.img-test{
    /* 7、设置图像转换为深褐色的比例 */
    -webkit-filter: sepia(40%); /* Chrome, Safari, Opera */
    filter:sepia(40%);
}

/* 效果图样式 */
.img-test{
    /* 7、设置图像转换为深褐色的比例 */
    -webkit-filter: sepia(80%); /* Chrome, Safari, Opera */
    filter:sepia(80%);
}

8、invert(%)

该函数用来设置图像的反转比例;

  • 默认值为0%(无变化);
  • 取值在0%-100%之间;
  • 值越大,图像反转的比例越大;
  • 值为100%,则图像完全反转;
/* 效果图样式 */
.img-test{
    /* 8、设置图像的反转比例 */
    -webkit-filter: invert(40%); /* Chrome, Safari, Opera */
    filter:invert(40%);
}

/* 效果图样式 */
.img-test{
    /* 8、设置图像的反转比例 */
    -webkit-filter: invert(80%); /* Chrome, Safari, Opera */
    filter:invert(80%);
}

9、hue-rotate(deg)

该函数用来设置图像的色相旋转,设定图像会被调整的色环角度值;

  • 默认值为0deg(无变化);
  • 没有最大值,超过360的值相当于多旋转一圈;
  • 相当于图像的色相为,原值色值在色轮上旋转指定角度后得到的新值;

/* 效果图样式 */
.img-test{
    /* 9、设置图像的旋转色相 */
    -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(90deg);
}

/* 效果图样式 */
.img-test{
    /* 9、设置图像的旋转色相 */
    -webkit-filter: hue-rotate(180deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(180deg);
}

/* 效果图样式 */
.img-test{
    /* 9、设置图像的旋转色相 */
    -webkit-filter: hue-rotate(270deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(270deg);
}

/* 效果图样式 */
.img-test{
    /* 9、设置图像的旋转色相 */
    -webkit-filter: hue-rotate(360deg); /* Chrome, Safari, Opera */
    filter: hue-rotate(360deg);
}

10、drop-shadow(h-shadow v-shadow blur spread color)

该函数用来设置图像的阴影效果;

  • h-shadow:设置水平方向阴影的偏移量,如果为负数,则阴影会出现在元素左边;
  • y-shadow:设置垂直方向阴影的偏移量,如果为负数,则阴影会出现在元素上方;
  • blur:设置阴影的模糊距离,值越大,越模糊;默认值为0,不允许为负;
  • spread:设置阴影的大小,正值会使阴影变大,负值会是阴影变小,默认值为0;
  • color:设置阴影的颜色;

注意:一些浏览器不支持spread属性,加了也不会渲染;

/* 效果图样式 */
.img-test{
    /* 10、设置图像阴影 */
    -webkit-filter: drop-shadow(0 0 6px #409eff); /* Chrome, Safari, Opera */
    filter: drop-shadow(0 0 6px #409eff);
}

/* 效果图样式 */
.img-test{
    /* 10、设置图像阴影 */
    -webkit-filter: drop-shadow(6px 6px 10px yellowgreen); /* Chrome, Safari, Opera */
    filter: drop-shadow(6px 6px 10px yellowgreen);
}

四、网页置灰效果

在一些特殊时间,会看到很多网站都置灰了;这种效果使怎么实现的???

其实很简单,只需要一个属性就可以了!!!

/* 将整个网页置灰 */
html {
  filter: grayscale(100%);
}

 就拿CSDN网站为例(仅仅只是为了示范,绝无其他意图!

【CSDN首页】原始效果:

【CSDN首页】置灰效果:

测试方法:

=========================================================================

每天进步一点点~!

快来试试这个友好的CSS属性吧~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/771382.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Godot4.2】用PlantUML和语雀画UML类图

概述 UML&#xff1a;统一建模语言(Unified Modeling Language,UML)是用来设计软件的可视化建模语言。PlantUML&#xff1a;是一个开源工具&#xff0c;它允许我们用文本形式来描绘和创建UML图。在VSCode中可以安装扩展来绘制&#xff0c;而在语雀的MarkDown编辑器中&#xff…

震惊!运气竟能如此放大!运气的惊人作用,你了解吗?

芒格&#xff1a;得到你想要的东西&#xff0c;最保险的办法&#xff0c;就是让自己配得上你想要的那个东西。今天仔细想了想这句话&#xff0c;他其实说的是无数成功人士的心声 —— “我配得上&#xff01;” 美剧《绝命毒师》有个导演叫文斯吉里根&#xff08;Vince Gilliga…

如何看待制造业数字化转型?从不同维度来聊一聊

作为一名TOB行业9年经验的老兵&#xff0c;近期我们团队拜访了不少制造企业&#xff0c;其以中小型企业居多&#xff0c;在与企业负责人交流数字化转型话题时&#xff0c;感触最多的还是管理者对“数字化转型”的认知。在数字化转型方面从国家层面到地方政府进行大量的宣传与政…

数据结构 1.1 数据结构的基本概念

本章总览&#xff1a; 一.什么是数据 1.数据 数据是信息的载体&#xff0c;是描述客观事物属性的数、字符及所有能输入到计算机中并被计算机程 序识别和处理的符号的集合。数据是计算机程序加工的原料。 早期计算机只能处理纯数值的问题&#xff0c;如世界第一题计算机ENI…

【京存】AI人工智能时代的分布式存储

如今&#xff0c;AI人工智能的浪潮席卷全球&#xff0c;数据以前所未有的速度增长与积累。如何高效存储、管理和利用海量数据&#xff0c;成为推动AI发展的关键。 今日&#xff0c;我们将为您深度剖析AI人工智能分布式存储方案&#xff0c;伴随AI技术在图像识别、自然语言处理…

金融(基金)行业信创国产化特点及统一身份认证解决方案

金融业在政策支持及自主驱动下&#xff0c;金融信创取得快速发展。从2020年开始&#xff0c;三期试点已扩容至5000余家&#xff0c;进入全面推广阶段。而基金行业信创建设与银行、证券、保险这些试点行业相比&#xff0c;进展较为缓慢。 基金行业信创当前面临的问题 与多家基…

百度出品_文心快码Comate提升程序猿效率

1.文心快码 文心快码包含指令、插件 和 知识三种功能&#xff0c; 1&#xff09;指令包含Base64编码、Base64解码、JSON转TS类型、JSON转YAML、JWT解码喂JSON。 2&#xff09;插件包含 3&#xff09;指令包含如下功能&#xff1a; 官网链接

SQL Server 2022的组成

《SQL Server 2022从入门到精通&#xff08;视频教学超值版&#xff09;》图书介绍-CSDN博客 SQL Server 2022主要由4部分组成&#xff0c;分别是数据库引擎、分析服务、集成服务和报表服务。本节将详细介绍这些内容。 1.2.1 SQL Server 2022的数据库引擎 SQL Server 2022的…

盘点几款国产AI高效神器!打工人赶紧码住

在这个AI技术飞速发展的时代&#xff0c;国产AI工具正成为提升工作效率的得力助手。作为AI工具测评博主&#xff0c;米兔有幸体验了多款国产AI工具&#xff0c;今天要向大家介绍几款超级好用的AI工具。这些工具不仅功能强大&#xff0c;而且操作简便&#xff0c;是职场人士不可…

贵的智能猫砂盆值得买吗?包含百元、千元的高性价比品牌推荐!

对于养猫的上班族来说&#xff0c;智能猫砂盆真的是越早买越好&#xff0c;普通猫砂盆用这么久下来能把我们这些上班的都累死&#xff0c;每次一回到家就能闻到猫屎的臭味&#xff0c;一看就收获猫砂盆里满满当当的猫屎&#xff0c;在外面要上班&#xff0c;在家里也要给猫上班…

API-正则表达式

学习目标&#xff1a; 掌握正则表达式 学习内容&#xff1a; 什么是正则表达式语法元字符修饰符 什么是正则表达式&#xff1a; 正则表达式是用于匹配字符串中字符组合的模式。在JavaScript中&#xff0c;正则表达式也是对象。 通常用来查找、替换那些符合正则表达式的文本&a…

二叉树的链式访问 与 二叉树专题

目录 二叉树的前、中、后序遍历求二叉树第K层节点的个数二叉树查找值为x的节点leetcode相同的树对称二叉树二叉树的前序遍历另一棵子树牛客 二叉树的遍历 二叉树的前、中、后序遍历 1.前序遍历&#xff1a;先访问根节点&#xff0c;再访问左子树&#xff0c;最后访问右子树 根…

# windows 安装 mysql 显示 no packages found 解决方法

windows 安装 mysql 显示 no packages found 解决方法 一、问题描述&#xff1a; 安装 mysql 时&#xff0c;出现 no packages found 不能进行下一步安装了&#xff0c; 如下图&#xff1a; 二、解决方法&#xff1a; 1、路径问题&#xff0c;系统不能识别你的安装包路径&…

MTK6769芯片性能参数_MT6769规格书_datasheet

联发科MT6769处理器采用了台积电12nm工艺。它具有8核CPU&#xff0c;采用2Cortex A75 2.0GHz 6Cortex A55 1.7GHz的构架。该处理器搭载了Mali-G52 MC2 GPU&#xff0c;运行速度高达820MHz&#xff0c;能够提供出色的图形处理性能。此外&#xff0c;MT6769还提供高达8GB的快速L…

无法启动此程序,因为计算机中丢失 api-ms-win-crt-string-11-1-0.dl。尝试重新安装该程序以解决此问题。

在windows server2012系统中利用WinSW部署jar包时&#xff0c;报错&#xff1a;无法启动此程序&#xff0c;因为计算机中丢失 api-ms-win-crt-string-11-1-0.dl。尝试重新安装该程序以解决此问题。 原因&#xff1a; 缺少Microsoft Visual C 2015运行库或者已安装低版本运行库…

DevExpress WPF中文教程:Grid - 如何显示摘要(设计时)?

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…

conda中创建环境并安装tensorflow1版本

conda中创建环境并安装tensorflow1版本 一、背景二、命令三、验证一下 一、背景 最近需要使用tensorflow1版本的&#xff0c;发个记录&#xff01; 二、命令 conda create -n tf python3.6 #创建tensorflow虚拟环境 activate tf #激活环境&#xff0c;每次使用的时候都…

机器学习与AI大数据的融合:开启智能新时代

在当今这个信息爆炸的时代&#xff0c;大数据和人工智能&#xff08;AI&#xff09;已经成为推动社会进步的强大引擎。作为AI核心技术之一的机器学习&#xff08;Machine Learning, ML&#xff09;&#xff0c;与大数据的深度融合正引领着一场前所未有的科技革命&#xff0c;不…

太速科技-FMC209-基于FMC的4路125MAD输入、2路1GDA输出子卡

FMC209-基于FMC的4路125MAD输入、2路1GDA输出子卡 一、板卡概述 本子卡基于FMC连接器实现4路125M采样率AD输出&#xff0c;两路1G采样率DA输出子卡&#xff0c;板卡默认由FMC连接器12V供电&#xff0c;支持外参考时钟&#xff0c;外输入时钟&#xff0c;外触发。 …

PE文件学习

一、介绍 PE文件&#xff0c;即Portable Executable文件&#xff0c;是一种标准的文件格式&#xff0c;主要用于微软的Windows操作系统上。这种格式被用来创建可执行程序&#xff08;如.exe文件&#xff09;、动态链接库&#xff08;.DLL文件&#xff09;、设备驱动&#xff0…