CSS3十大滤镜效果详解

news2024/11/18 14:44:08

滤镜效果

类似于美颜相机、美图秀秀这样的美颜工具，能够让我们轻松地应用多种特效，例如转换为黑白照片、复古风格化、调整亮度等。在之前仅凭CSS几乎很难做到这些效果。
但在CSS3的语法中，所有的这些视觉特效都是通过“filter”属性来快速实现的。
语法：

filter:none|方法;

filter属性值有以下10种，每一种都对应着一种滤镜效果。其中属性取值无效，那么会默认取值为none。除了特殊说明，属性取值如果是百分比值（如78%），那么该函数也接收小数（0.78）。

属性值说明
none表示不设置滤镜效果
brightness()亮度
grayscale()灰色
sepia()复古
invert()反色
hue-rotate()旋转（色相）
drop-shadow()阴影
opacity()透明度
blur()模糊度
contrast()对比度
saturate()饱和度

亮度：brightness()

概念：brightness()方法用来实现减弱或增强图片的亮度。

语法：

filter:brightness(amount);

属性值

取值为0%时就是完全黑色，值为100%就表示图像无变化。如果值在0%到100%之间表示减弱图片的亮度，值大于100%以上就表示增强图片的亮度。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>明亮</title>
		<style>
			*{
				padding:0;
				margin:0;
			}
			div{
				display:inline-block;
				width:230px;
				height:230px;
				margin:20px 20px;
			}
			.after{
				filter:brightness(2);
			}
		</style>
	</head>
	<body>
		<div class="before">
			<h2>之前</h2>
			<img src="../img/9.png" alt="">
		</div>
		<div class="after">
			<h2>现在</h2>
			<img src="../img/9.png" alt="">
		</div>
		
	</body>
</html>

运行结果
在这里插入图片描述

灰度：grayscale()

概念：grayscale()方法可以用于将图片转换为灰度图像（黑白图像）。灰度滤镜就是将彩色图片转换成黑白图片。

语法：

filter:grayscale(amount);

属性值

值为0%时表示图形无变化。当值为100%时则表示将图像完全转换为灰度图像（黑白图像）。值为0%到100%之间的值会增加图片灰度程度。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>灰度</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					width:230px;
					height:230px;
					margin:20px 20px;
				}
				.after{
					filter:grayscale(100%);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/2.png" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/2.png" alt="">
			</div>
			
		</body>
	</html>

运行结果
在这里插入图片描述

复古：sepia()

概念：sepia()方法用于实现将图像转换为深褐色。复古滤镜，也叫褐色滤镜。

语法：

filter:sepia(amount);

属性值

取值范围为0%~100%。其中，值为100%表示图像完全是深褐色的，值为0%时表示图像无变化。
如果值在0%到100%之间，值越大，变化就越增强。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复古</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after{
					filter:sepia(100%);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果
在这里插入图片描述

反色：invert()

概念：invert()方法是用来实现反色滤镜效果的。反色，指的是红、绿、蓝3个通道的像素取各自的相反值。

语法:

filter:invert(amount);

属性值

取值范围是0%到100%。其中，值为0%表示图像无变化，但值为100%则表示图像完全反转所有颜色。如果值在0%到100%之间，值越大，反转程序就越高。

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>反色</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:invert(1);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果
在这里插入图片描述

旋转：hue-rotate()

概念：hue-rotate()方法用来实现将应用色相旋转的滤镜效果。

语法：

filter:hue-rotate(angle);

属性值

angle值设定图像会被调整的色环角度值。angle值是一个度数,单位是deg(即“degree”)。其中，值为0deg表示不旋转，但值为360deg表示旋转360o，也就是相当于一个循环

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:hue-rotate(240deg);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果
在这里插入图片描述

阴影：drop-shadow()

概念：drop-shadow()方法用来给图像添加阴影效果。

语法：

filter:drop-shadow(x-offset y-offset blur color);

属性值

属性值说明
x-offset必选值，定义水平阴影的偏移距离，可以使用负值。由于是W3C坐标系，因此x-offset值为正时，向右偏移；取值为负时，向左偏移。
y-offset必选值，定义垂直阴影的偏移距离，可以使用负值。由于是W3C坐标系，因此y-offset值为正时，向下偏移；取值为负时，向上偏移。
blur可选值，定义阴影的模糊半径，只能为正值。值越大，阴影就越大，也越模糊。
color可选值，定义阴影的颜色。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阴影</title>
		<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:drop-shadow(10px 10px 15px blue);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果
在这里插入图片描述

透明度：opacity()

概念：opacity()方法用来给图像添加透明效果，也就是透明度滤镜效果。

语法：

filter:opacity(amount);

属性值

取值范围是0%~100%。其中，值为0%则是使图像完全透明，值为100%则是图像无变化。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>透明</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:opacity(60%);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果

在这里插入图片描述

模糊度：blur()

概念：blur()方法用来实现模糊度滤镜效果，将高斯模糊应用于输出图片，也就是马赛克。

语法：

filter:blur(amount);

属性值

amount的取值是一个像素值，单位是px，定义了高斯函数的标准偏差值，即屏幕上有多少像素相互融合；因此像素值越大，模糊效果会更加明显。值为0会使输入保持不变。该值为空则为0.

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模糊度</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					filter:blur(10px);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果
在这里插入图片描述

对比度：contrast()

概念:contrast()方法用来调整输入图像的对比度。

语法:

filter:contrast(amount);

属性值

低于100%的值会降低对比度，高于100%的值会增加对比度。值为0%将创建完全灰色的图像，值为100%时不会有任何变化，值为200%时表示增强对比度为原先的2倍。该值为空时默认为1。

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对比度</title>
	<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
					/* filter:contrast(200%); */
					filter:contrast(3);
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果
在这里插入图片描述

饱和度：saturate()

概念：saturate()方法用于改变图像饱和度。

语法：

filter:saturate(amount);

属性值

低于100%的值会降低饱和度，高于100%的值会增加饱和度。值为0%则是完全不饱和，值为100%则表示图像无变化。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>饱和度</title>
		<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
			
					/* filter:saturate(50%); */
					filter:saturate(300%);
					
					
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果
在这里插入图片描述

多种滤镜

概念：如果想要为元素同时定义多种滤镜效果，两个值之间要用空格隔开。滤镜效果将按声明顺序依次应用。

语法

filter:brightness() grayscale() blur().....;

注意：滤镜属性值没有规定要按一定的顺序去排序，可以乱序排列。

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多种滤镜效果</title>
		<style>
				*{
					padding:0;
					margin:0;
				}
				div{
					display:inline-block;
					margin:20px 20px;
				}
				img{
					width:400px;
					height:350px;
				}
				.after img{
                    filter:opacity(0.5) blur(1px) sepia(0.3) drop-shadow(20px 10px 10px rgba(31,151,247,0.5));
				}
			</style>
		</head>
		<body>
			<div class="before">
				<h2>之前</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			<div class="after">
				<h2>现在</h2>
				<img src="../img/a.jpg" alt="">
			</div>
			
		</body>
	</html>

运行结果
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

最全 chrome driver

最全 chrome driver

超全chrome和driver的对应链接 https://raw.githubusercontent.com/GoogleChromeLabs/chrome-for-testing/main/data/latest-patch-versions-per-build-with-downloads.json 从这个链接中直接找对应的chrome和driver 复制链接下载。 注意最新版的在一些文章里的链接是找不到的…
阅读更多...
论文笔记（四十）Goal-Auxiliary Actor-Critic for 6D Robotic Grasping with Point Clouds

论文笔记（四十）Goal-Auxiliary Actor-Critic for 6D Robotic Grasping with Point Clouds

Goal-Auxiliary Actor-Critic for 6D Robotic Grasping with Point Clouds 文章概括摘要1. 介绍2. 相关工作3. 学习 6D 抓握政策3.1 背景3.2 从点云抓取 6D 策略3.3 联合运动和抓握规划器的演示3.4 行为克隆和 DAGGER3.5 目标--辅助 DDPG3.6 对未知物体进行微调的后视目标 4. 实…
阅读更多...
深度学习记录--偏差/方差(bias/variance)

深度学习记录--偏差/方差(bias/variance)

误差问题 拟合神经网络函数过程中会出现两种误差&#xff1a;偏差(bias)和方差(variance) 偏差和误差的区别 欠拟合(underfitting) 当偏差(bias)过大时&#xff0c;如左图&#xff0c;拟合图像存在部分不符合值&#xff0c;称为欠拟合(underfitting) 过拟合(overfitting) …
阅读更多...
软件测试|使用Python生成PDF文件

软件测试|使用Python生成PDF文件

简介 PDF&#xff08;Portable Document Format&#xff09;是一种常用的文档格式&#xff0c;具有跨平台兼容性、保真性、安全性和交互性等特点。我们日常生活工作中的合同、报告、论文等通常都采用PDF格式&#xff0c;以确保文档在不同的操作系统&#xff08;例如 Windows、…
阅读更多...
鸿蒙开发工程师会不会有很好的就业前景?

鸿蒙开发工程师会不会有很好的就业前景?

一&#xff0c;鸿蒙带动IT开发和应用整体结构的变革 1月11日&#xff0c;以鸿蒙为首的华为概念股大幅走强&#xff0c;创业板创识科技拉升封板&#xff0c;传智教育、智度股份、高新发展、立达信、吉大正元等多股涨停&#xff0c;华亚电子、九联科技、软通动力、辰奕智能、芯海…
阅读更多...
正则化方法介绍

正则化方法介绍

在深度学习中&#xff0c;正则化是一种用于防止模型过拟合的技术。过拟合是指模型在训练数据上表现良好&#xff0c;呆在未见过的测试数据集上表现效果较差的情况。正则化的目标是通过对模型性的参数或层的约束&#xff0c;使其在训练数据上表现的不那么复杂&#xff0c;从而提…
阅读更多...
【RTOS】快速体验FreeRTOS所有常用API（10）资源管理

【RTOS】快速体验FreeRTOS所有常用API（10）资源管理

目录 十、资源管理10.1 基本概念10.2 关任务调度器10.3 关中断10.4 实例 十、资源管理 该部分在上份代码基础上修改得来&#xff0c;代码下载链接&#xff1a; https://wwzr.lanzout.com/iqBYJ1lauxof 密码:9adb 该代码尽量做到最简&#xff0c;不添加多余的、不规范的代码。 内…
阅读更多...
开源云真机平台-Sonic平台-python自定义脚本-批量导出monkey测试日志并抓取logcat日志

开源云真机平台-Sonic平台-python自定义脚本-批量导出monkey测试日志并抓取logcat日志

【主要功能】 开源云真机平台-Sonic平台-python自定义脚本&#xff1a; 1、批量导出monkey测试日志 2、抓取logcat日志 3、将导出的日志批量复制到局域网内的制定电脑上进行收集整理&#xff1b; 4、每一台设备的monkey日志、logcat日志单独存储&#xff0c;并以日期设备序…
阅读更多...
【CSDN年度征文】关于三掌柜2023全年回顾和总结

【CSDN年度征文】关于三掌柜2023全年回顾和总结

目录 前言 顺利转正 被任命为项目经理 印象深刻的实战经历&#xff1a;项目重大版本上线 系统学习新技术的心得体会 获得腾讯云开发者社区优秀作者奖 想要安利给所有人的开发工具 技术大会招募 线下沙龙圆桌主持 新书发布上市 受邀直播探会 接受采访 组织1024程序…
阅读更多...
css mask使用，背景透明，图片裁切

css mask使用，背景透明，图片裁切

1 语法 mask: url(image.png); 使用位图来做遮罩mask: url(image.svg#star); 使用SVG图形中的形状来做遮罩mask: linear-gradient(#000 , transparent) 接受类似背景参数的渐变来做遮罩2 示例 2.1 背景透明 {background: url(im…
阅读更多...
算法第二十天-丑数Ⅱ

算法第二十天-丑数Ⅱ

丑数Ⅱ 题目要求 解题思路 题目的要求是让我们生成第n个丑数。如果考虑逐个遍历自然数是否为丑数&#xff0c;一定会超时。这里推荐使用生成的办法。 要生成第n个丑数&#xff0c;我们必须从第一个丑数1开始&#xff0c;向后逐渐的寻找。丑数只包含2&#xff0c;3&#xff0c…
阅读更多...
Tensorflow2.0笔记 - Broadcasting和Tile

Tensorflow2.0笔记 - Broadcasting和Tile

关于broadcasting的介绍&#xff0c;参考这篇文章。 https://blog.csdn.net/python_LC_nohtyp/article/details/104097417 import tensorflow as tf import numpy as nptf.__version__#关于broadcasting的介绍&#xff0c;参考这篇文章 #https://blog.csdn.net/python_LC_noht…
阅读更多...
【Vue3】3-3 : 组件之间是如何进行互相通信的

【Vue3】3-3 : 组件之间是如何进行互相通信的

本书目录&#xff1a;点击进入 一、组件之间为什么要做通信 二、组件之间通信方式 2.1、父传子&#xff1a;由传递属性实现 stage 1&#xff1a;申明 &#xff08;即定义&#xff09; stage 2&#xff1a;注册 stage 3&#xff1a;使用 【示例】&#xff1a;父组件将 tit…
阅读更多...
前端动画特效分享（附在线预览）

前端动画特效分享（附在线预览）

分享几款不错的动画特效源码 其中有CSS动画、canvas动画、js小游戏等等 下面我会给出特效样式图或演示效果图 但你也可以点击在线预览查看源码的最终展示效果及下载源码资源 canvas爱心代码动画 爱心代码动画特效 由里向外不断的产生的小爱心形成一个巨大的爱心动画 以下图片…
阅读更多...
【前端转安卓】-Java基础知识笔记

【前端转安卓】-Java基础知识笔记

常量定义&#xff1a;final public class HelloWorld {// 静态常量public static final double PI 3.14;// 声明成员常量final int y 10;public static void main(String[] args) {// 声明局部常量final double x 3.3;} }变量声明、赋值 String username,address,phone,te…
阅读更多...
C for Graphic：Sliced Circle Image

C for Graphic：Sliced Circle Image

不做UI不知道&#xff0c;没想到时至今日&#xff0c;ugui居然没有sliced filled image模式&#xff0c;用circle做filled&#xff0c;不能用sliced九宫格图&#xff0c;导致每次使用这个效果必须一张新图&#xff0c;何其浪费资源。 原始功能如下&#xff1a; 我…
阅读更多...
特征工程-特征处理（三）

特征工程-特征处理（三）

特征处理 连续型变量处理&#xff08;二&#xff09; 多特征 降维 PCA PCA是一种常见的数据分析方式&#xff0c;通过数据分解&#xff0c;将高维数据降低为低维数据&#xff0c;同时最大程度保持数据中保存的信息。 from sklearn.decomposition import PCA A np.array([[84…
阅读更多...
运维体系中的那些Ops们

运维体系中的那些Ops们

目录 前言 DevOps DevSecOps GitOps 1、缺少一致性 2、使用成本高 3、鉴权分散 4、审核审计困难 5、不可变基础设施扩展难 DataOps AIOps 总结 前言 提到运维&#xff0c;自然而然会联想到DevOps&#xff0c;大家应该还听说过DataOps、GitOps、DevSecOps、AIOps等…
阅读更多...
解决英特尔无线网卡WiFi或者蓝牙突然消失问题

解决英特尔无线网卡WiFi或者蓝牙突然消失问题

winR&#xff0c;输入“devmgmt.msc”&#xff0c;检查设备管理器中的无线网卡驱动是否安装好。 访问https://www.intel.cn/content/www/cn/zh/download/19351/windows-10-and-windows-11-wi-fi-drivers-for-intel-wireless-adapters.html下载对应系统版本的英特尔无线网卡WiFi…
阅读更多...
MC使用Waterfall 跨服

MC使用Waterfall 跨服

前言 想弄一个跨服&#xff0c;目前这篇文章是边测试边写的&#xff0c;两个子服都是在同一个机器上运行的 如果两个子服在不同的网络&#xff0c;跨服的延迟就会比较高 两个子服 s1 和 s2 都是使用folia核心 版本1.20.1s1 端口: 25565s2 端口 : 25566 1.下载 Waterfall W…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023