【CSS】浅学一下filter

目录

1、基本概念

2、用法

3、应用案例

更加智能的阴影效果:

元素、网页置灰

元素强调、高亮

毛玻璃效果

调整网页sepia 褐色值可以实现护眼效果


1、基本概念

CSS filter 属性将模糊或颜色偏移等图形效果(对比度、亮度、饱和度、模糊等等)应用于元素形成滤镜,滤镜通常用于调整图像,背景。

blur():模糊图像
brightness() :让图像更明亮或更暗淡
contrast():增加或减少图像的对比度
drop-shadow():在图像后方应用投影
grayscale():将图像转为灰度图
hue-rotate():改变图像的整体色调
invert():反转图像颜色
opacity():改变图像透明度
saturate():超饱和或去饱和输入的图像
sepia():将图像转为棕褐色

2、用法

/* 使用SVG filter */
filter: url("filters.svg#filter-id");
/* 使用filter函数 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
/* 多个filter */
filter: contrast(175%) brightness(3%);
/* 不使用filter */
filter: none;
/* 全局变量 */
filter: inherit;
filter: initial;
filter: unset;

3、应用案例

更加智能的阴影效果:

在给元素添加阴影的时候。我们一般采用box-shadow属性,通过box-shadow(x偏移,y偏移,模糊大小,阴影大小,色值,inset)的语法形式很容易为元素添加阴影效果,但box-shadow在给透明图片添加阴影效果时无法穿透元素,只能把阴影加在透明图片元素的盒模型上。这个时候,filter属性的drop-shadow方法就能很好的解决这个问题,用它添加的阴影可以穿透元素,直接添加到透明图片上。

drop-shadow添加的阴影除了可以穿透透明元素外,阴影效果和box-shadow是相同的。

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

box-shadow和drop-shadow对比图

元素、网页置灰

发生重大灾害事故或其它哀悼日时,国企政府网站往往有网页全部置灰的需求。

网页中有鼠标hover悬浮到灰色元素上时变成彩色的效果。

此时就可以使用filter属性的grayscale方法实现,它可以调整元素灰度,通过给页面元素设置filter:grayscale(100%)就可将页面元素置灰。

网页置灰实现:给页面body元素添加一个.gray类,再添加如下代码,就可实现整个网页置灰效果

.gray {filter: grayscale(100%);
}

为了兼容IE8等其它低版本浏览器,我们可以加上浏览器前缀和svg滤镜。

.gray {-webkit-filter: grayscale(1);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);filter: grayscale(100%);
}

在做紧急置灰网页需求时,上线一段时间往往需要撤掉这个功能,我们还可以在首次上线时添加以下类似的方法,来控制置灰效果的自动上下线时间,这样到达预定时间就可自动撤去,不用走两次施工流程。

(function setGray() {var endTime = Date.parse("Apr 06 2077 00:00:01");var timestamp = Date.parse(new Date());if (timestamp <= endTime) {document.querySelector('html').classList.add('gray');}
})();

元素强调、高亮

brightness方法可以实现元素高亮的效果,可以应用到菜单栏、图片列表hover效果,来强调鼠标当前悬浮或选中的内容。

毛玻璃效果

对分别使用 filter: blur 和 backdrop-filter: blur两种方法实现这种效果的总结。

有两个含有相同类名 glass 的 div 元素,它们分别被添加两个类 glass-by-filter 和 glass-by-backdrop-filter 来区分两种方法。

<div class="glass glass-by-filter"></div>
<div class="glass glass-by-backdrop-filter"></div>.glass {height: 300px;width: 300px;border: 1px groove #EFEFEF;border-radius: 12px;background: rgba(242, 242, 242, 0.5);box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
}

filter: blur 方法,给元素添加了一个 ::before 伪类设置 blur 方法并将其置于底层实现毛玻璃效果。

.glass-by-filter {z-index: 1;box-sizing: border-box;position: relative;
}
.glass-by-filter::before {content: "";position: absolute;top: 0; right: 0; bottom: 0; left: 0;z-index: -1;background: inherit;filter: blur(10px);
}

backdrop-filter: blur 直接在元素上添加 blur 方法实现毛玻璃效果。

.glass-by-backdrop-filter {backdrop-filter: blur(10px);
}

实现效果如下图所示(左:filter、右:backdrop-filter):

调整网页sepia 褐色值可以实现护眼效果

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器人制作开源方案 | 清洁机器人

作者&#xff1a;胡志宇、白永康、颉志国、刘昭迅、王维浩 单位&#xff1a;北京石油化工学院 指导老师&#xff1a;陈亚、王殿军 1. 设计方案论证 1.1 清洁机器人方案选择 目前&#xff0c;市场上清洁机器人比比皆是&#xff0c;各大品牌之间的竞争也相当激烈&#xff0c;…

MongoDB快速实战与基本原理

MongoDB 介绍 什么是 MongoDB MongoDB 是一个文档数据库&#xff08;以 JSON 为数据模型&#xff09;&#xff0c;由 C 语言编写&#xff0c;旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。文档来自于“JSON Document”&#xff0c;并非我们一般理解的 PDF、WORD 文档…

【MySQL】数据库之MHA高可用

目录 一、MHA 1、什么是MHA 2、MHA 的组成 3、MHA的特点 4、MHA的工作原理 二、有哪些数据库集群高可用方案 三、实操&#xff1a;一主两从部署MHA 1、完成主从复制 步骤一&#xff1a;完成所有MySQL的配置文件修改 步骤二&#xff1a;完成所有MySQL的主从授权&#x…

vue3中集成sass实现全局scss样式变量

一、安装sass npm i sass 二&#xff0c;在style/variable.scss创建一个variable.scss文件 // 给项目提供的scss全局变量 $mycolor:red; 三、在vite.config.ts文件配置如下: export default defineConfig({ plugins: [ vue(), // scss全局变量的一个配置 css: {…

三款红外接收二极管电路图

红外接收二极管电路图一&#xff1a; 如图所示&#xff0c;图是红外线遥控接收装置实例。红外线传感器有多种&#xff0c;这里选用光电二极管TPS604。工作原理简介如下&#xff1a;光电二极管TPS604接收到被调制的红外线的微弱信号&#xff0c;先经场效应晶体管VT1的前级放大&…

Embree使用指南(无SYCL)

IntelEmbree是由Intel开发的高性能光线跟踪库&#xff0c;以Apache 2.0许可证的开源形式发布。 Embree的目标是图形应用程序开发人员&#xff0c;以提高逼真照片渲染应用程序的性能。Embree针对生产渲染进行了优化&#xff0c;重点关注非相干光线性能、高质量的加速结构构建、丰…

分布式系统的CAP理论详解

介绍 CP 系统是指在 CAP 理论中偏向于一致性&#xff08;Consistency&#xff09;和分区容错性&#xff08;Partition tolerance&#xff09;&#xff0c;牺牲了可用性&#xff08;Availability&#xff09;。在这样的系统中&#xff0c;一致性是非常重要的&#xff0c;即使在…

数据结构学习笔记——查找算法中的树形查找(B树、B+树)

目录 前言一、B树&#xff08;一&#xff09;B树的概念&#xff08;二&#xff09;B树的性质&#xff08;三&#xff09;B树的高度&#xff08;四&#xff09;B树的查找&#xff08;五&#xff09;B树的插入&#xff08;六&#xff09;B树的删除 二、B树&#xff08;一&#xf…

每日一练:LeeCode-316. 去除重复字母【字符串操作+单调栈+布尔型变量】

本文是力扣LeeCode-316. 去除重复字母 学习与理解过程&#xff0c;本文仅做学习之用&#xff0c;对本题感兴趣的小伙伴可以出门左拐LeeCode。 给你一个字符串 s &#xff0c;请你去除字符串中重复的字母&#xff0c;使得每个字母只出现一次。需保证 返回结果的字典序最小&#…

【linux】线程同步+基于BlockingQueue的生产者消费者模型

线程同步基于BlockingQueue的生产者消费者模型 1.线程同步2.生产者消费者模型3.基于BlockingQueue的生产者消费者模型 喜欢的点赞&#xff0c;收藏&#xff0c;关注一下把&#xff01; 1.线程同步 在线程互斥写了一份抢票的代码&#xff0c;我们发现虽然加锁解决了抢到负数票的…

C++ 中的耗时计算函数

#include <time.h>int clock_gettime (clockid_t clock_id, struct timespec *tp) 获取当前 clock_id 的时钟值并存储在 tp 中。 其中 tp 是一个 timespec 结构体&#xff0c;在 time.h 头文件中定义&#xff1a; #include <time.h>:struct timespec {time_t t…

Java重修第二天—学习”方法“

通过学习本篇文章可以掌握如下知识 1、方法的定义 2、方法在计算机中的执行流程。 3、方法使用时常见问题 4、Java中方法的参数传递机制 5、方法重载 1 方法是什么 方法是一种语法结构&#xff0c;它可以把一段代码实现的某种功能封装起来&#xff0c;以便重复利用。 方…

第二百四十五

我们在上一章回中介绍了"修改页面导航中遇到的问题"沉浸式状态样相关的内容&#xff0c;本章回中将介绍如何修改Avatar的大小.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在正常使用CirCleAvatar组件时可以通过该组件的radius属性来修改它的…

Java调用百度云语音识别【音频转写】

百度云文档 ttps://ai.baidu.com/ai-doc/SPEECH/Bk5difx01 示例代码: import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONArray; import lombok.extern.slf4j.Slf4j; import okhttp3.*; import org.json.JSONObject; import org.springframework.stereotyp…

目标检测-One Stage-YOLO v3

文章目录 前言一、YOLO v3的网络结构和流程二、YOLO v3的创新点总结 前言 根据前文目标检测-One Stage-YOLOv2可以看出YOLOv2的速度和精度都有相当程度的提升&#xff0c;但是精度仍较低&#xff0c;YOLO v3基于一些先进的结构和思想对YOLO v2做了一些改进。 提示&#xff1a;…

多端多平台高性能推理引擎

多端多平台高性能推理引擎是AI模型产业应用的关键环节&#xff0c;被视为AI落地的最后一公里。具体来说&#xff0c;这种推理引擎需要部署在多种场景和平台上&#xff0c;包括服务器端、边缘端、移动端和网页前端等&#xff0c;同时还需要满足不同的性能要求。 由于部署环境和…

突破技术边界:R与jsonlite库探秘www.snapchat.com的数据之旅

概述 Snapchat是一款流行的社交媒体应用&#xff0c;它允许用户发送和接收带有滤镜和贴纸的照片和视频&#xff0c;以及创建和观看故事和发现内容。Snapchat的数据是非常有价值的&#xff0c;因为它可以反映用户的行为、偏好和趋势。然而&#xff0c;Snapchat的数据并不容易获…

【LMM 009】MiniGPT-4:使用 Vicuna 增强视觉语言理解能力的多模态大模型

论文描述&#xff1a;MiniGPT-4: Enhancing Vision-Language Understanding with Advanced Large Language Models 论文作者&#xff1a;Deyao Zhu∗ Jun Chen∗ Xiaoqian Shen Xiang Li Mohamed Elhoseiny 作者单位&#xff1a;King Abdullah University of Science and Techn…

JavaScript DOM—节点操作

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍在在JavaScript DOM 节点操作以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xff0c;友友们有任何问题可以在评论区…

oracle json包 解析JSON

Oracle数据库中的JSON功能包可以用来解析和处理JSON数据。该功能包提供了一组用于解析和操作JSON数据的函数和过程。 要使用JSON功能包解析JSON数据&#xff0c;首先需要将JSON数据保存为一个Oracle数据库中的JSON类型的列或变量。然后&#xff0c;可以使用JSON功能包中的函数…