CSS3 filter滤镜详解

最新推荐文章于 2024-07-07 08:53:09 发布
最新推荐文章于 2024-07-07 08:53:09 发布
阅读量7.8k 收藏 11
点赞数
分类专栏： css3 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pycharm_k/article/details/105583337
版权

CSS3 filter滤镜详解

文章目录


因为filter是css3新属性，所以我们在介绍它之前先简单看一下它的兼容性（图片来源于菜鸟教程）：
在这里插入图片描述
那么我们开始介绍一下filter的几个属性：

1、filter:blur(px) 高斯模糊

这个属性很简单是给图像设置高斯模糊，括号中数值越大那么图像越模糊。
写个例子：

<style type="text/css">
	img{
		height: 100px;
		width: 200px;
	}
	div{
		filter: blur(3px);
	}
</style>
<body>
	<div>
		<img src="1.jpg" >
		<span>
			这是一张图片
			<p>p标签</p>
		</span>
	</div>
</body>

在这里插入图片描述
就如效果图上所显示的，这个属性会影响到这个标签下面所有的子代元素。

2、filter:brightness(%) 亮度调节

说简单点这个属性用于调节图像亮度，值位于0和1之间，默认是1（正常亮度），数值越小亮度越低，到达0时为黑色。
例：

div{
	color: red;
	filter: brightness(50%);
	}

效果图如下：
在这里插入图片描述
html和上面相同，这里不做复制，看效果图就很容易理解，图像很明显变暗，字体颜色设置的红色，这里变成黑红，说明对子代同样有效。

3、filter:contrast(%) 对比度调节

这个属性调节的是图像当中的对比度，取值同brightness，为了我们看的更清晰，我换了一张图片，请看案例：

<style type="text/css">
	img{
		height: 100px;
		width: 200px;
	}
	img:nth-of-type(2){
		filter: contrast(50%)	;
	}
	div{
		color: red;
		filter: brightness(50%);
	}
</style>
<body>
	<p>原图</p>
	<img src="2.jpg" />
	<p>contrast(50%)</p>
	<img src="2.jpg" >
	<div>
		<p>brightness(50%)</p>
		<img src="2.jpg" >
		<span>
			这是一张图片
			<p>p标签</p>
		</span>
	</div>
</body>

效果图如下：
在这里插入图片描述

4、 filter:drop-shadow(offset-x offset-y blur spread color) 阴影设置

这个属性可设置图像阴影，类似于box-shadow，所以她的五个参数分别是，x偏移量、y偏移量、模糊程度（值越小图像越清晰）、阴影大小、颜色。注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。
注意如果加上了这个属性值，那么drop-shadow不能够使用
例：

div{
	color: red;
	filter: drop-shadow(10px 10px 5px red);
}

效果图：
在这里插入图片描述
通过filter滤镜，一些浏览器为了更好的性能会提供硬件加速。

5、filter:grayscale(%) 灰度

使图像变成灰度样式，值同样是0-1；
例：

div{
	color: red;
	filter: grayscale(80%);
}

效果图：
在这里插入图片描述

6、filter:hue-rotate(deg) 应用色旋转

这个属性需要大家去做一下案例才比较好理解，给图像应用色相旋转，相当于是一些应用色来相互转换。默认值为0deg。
例：

div{
	color: red;
	filter: hue-rotate(180deg);
}

效果图：
在这里插入图片描述
可比较上面的原图。

7、filter:invert(%) 反转图像输入

反转输入图像.数值为超过50%之前，慢慢递增图像逐渐变得模糊，超过50%以后，数值满满递增，图像开始反向清晰。
例：

div{
	color: red;
	filter: invert(100%);
}

效果图：
在这里插入图片描述

8、filter:opacity(%) 透明度

这个属性大家很熟悉是关于透明度的，和直接使用opacity(%)不同的是，使用filter后 一些浏览器为了提升性能会提供硬件加速。
例：

div{
	color: red;
	filter: opacity(50%)
}

效果图：
在这里插入图片描述

9、filter:saturate(%) 饱和度

转化图像的饱和度，数值为0-100%,由于本人对这些东西不是特别敏感，所以大家自行理解。（原图为饱和度100%，饱和度逐渐降低，图像变得越来越不清晰）
例：

<style type="text/css">
	img{
		height: 100px;
		width: 200px;
	}
	div{
		color: red;
		filter: saturate(50%);
	}
</style>
<body>
	<p>原图</p>
	<img src="2.jpg" >
	<div>
		<p>saturate(50%)</p>
		<img src="2.jpg" >
		<span>
			这是一张图片
			<p>p标签</p>
		</span>
	</div>
</body>

效果图：
在这里插入图片描述

10、filter:sepia(%) 褐色转化

将图像转换为深褐色。其实类似于灰度，只是转变的颜色不同而已，默认值为0.
例：

div{
	color: red;
	filter: sepia(50%);
}

效果图：
在这里插入图片描述

无脑的猿人
关注
专栏目录
用CSS3实现滤镜——常见九种效果
weixin_48610566的博客
06-26 873
特别强调：IE无法实现！！！
CSS3的滤镜filter属性
weixin_30493401的博客
08-24 169
css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的毛玻璃效果、老照片（黑白照片）、火焰效果等。 一、blur(px)高斯模糊 二、brightness(%)亮度 三、contrast(%)对比度 四、drop-shadow()阴影 注意： 这个 drop-shadow 与 box-shadow 都是在说...
【前端】css控制页面提高亮度
最新发布
姜太小白的博客
07-07 439
css控制页面提高亮度
CSS3 filter
02-02 113
CSS3 filter CSS3 filter和css filter完全是两样东东。更不是我们一直说的IE滤镜。 Filters主要是运用在图片上，以实现一些特效。（尽管他们也能运用于video上） 其默认值是none，他不具备继承性，其中filter-function一个具有以下值可选： grayscale灰度 sepia褐色（求专业指点翻译） saturate饱...
CSS3滤镜(filter)--CSS3技术
weixin_30549175的博客
09-19 209
filter 属性定义了元素(通常是<img>)的可视效果，例如图片的模糊、饱和度、灰度等……个人感觉功能很强大 1、filter的语法 filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sat...
CSS3的filter属性
qq_44849271的博客
09-05 755
CSS——filter属性1、元素模糊2、元素亮度3、元素投影4、元素的灰色程度5、元素对比度6、元素颜色7、元素反转颜色8、元素透明程度9、元素饱和度10、元素的褐色 1、元素模糊 filter:blur(像素值) 像素值越高，元素越模糊 img{ filter:blur(10px); } /*HTML:*/ <img src="./1.jpg"></img> 效果： 2、元素亮度 filter:brightness(百分比); 100%是正常亮度，百分比越小，元素亮度
关于 CSS3 中的 filter(滤镜) 属性
daoxiaofei的博客
10-11 939
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。 CSS语法： filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url() 提示：若想在一个元素上应用多个滤镜，可用空格分隔 filter函数： 注意: 滤镜通常使用百分比 (如：
css filter滤镜详解
07-21
CSS 滤镜详解 CSS 滤镜是一种可以改变 HTML 元素的视觉效果的技术，通过使用滤镜，可以实现各种特殊效果，如透明度、模糊、阴影、翻转、光效等。本文将详细介绍 CSS 滤镜的常用方法和浏览器兼容问题。 一、透明度...
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
01-21
要使用标准的CSS3实现某元素的投影效果，有两个套路，第一个就是使用常见的box-shadow, 第二个就是使用CSS3的filter阴影滤镜drop-shadow，那这两个阴影实现有什么具体的差异呢？ 一、兼容性不一 CSS3 box-shadow从...
CSS3 Filter
未名胡的博客
11-24 546
需要说明的是，这是一篇译文，原文地址 . Image Adjustment with CSS Filter Effects 调整图片的亮度和对比度，或者将图片变成灰色或棕褐色是一种在图片编辑软件中常见的行为， 比如说 Photoshop. 但是现在已经可以利用 CSS 给网页上的图片添加相同的特性。 而这种能力来源于 Filter Effects， 实际上这是一种还处在草案阶
css3 filter
齐枫的博客
07-12 247
filter filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); 注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表...
CSS3的filter
火火的专栏
05-31 351
CSS3的filter这几天在网上看到了CSS3里面的filter的用法，然后就自己试验了，如果不考虑兼容性，发觉真心的强大。这个方法主要是对图片颜色的处理。 其默认值是none，他不具备继承性，filter具有以下值可选： grayscale灰度 sepia褐色 saturate饱和度 hue-rotate色相旋转 invert反色 opacity透明度 brightness亮度 contras
css3——filter
weixin_41265663的博客
10-15 278
filter 属性定义了元素(通常是&lt;img&gt;)的可视效果（我试了一下，几乎可以对所有的元素进行可视效果操作（元素内部所有内容，也包括背景效果）） 1、filter:blur(npx); 给元素设置高斯模糊效果； 2、filter:brightness(percent); 调整图像的亮度； percent = 0 时全黑，percent = 50%时像是加了一层透明度为0.5 背景...
【CSS3】 filter(滤镜)属性
xyue_的博客
05-02 1916
CSS3 filter过滤、滤镜属性 总结
css3 filter属性
qq_41309350的博客
03-03 125
原图 <style> img{ width: 100px; height: 100px; filter: grayscale(100%); } </style> </head> <body> <img src="./img/f.PNG"/> </div> （1）灰度100% （2）褐度 filter
CSS3 webkit-filter滤镜效果详解与示例
"这篇文档详细介绍了CSS3中的滤镜功能，特别是WebKit实现的`-webkit-filter`属性，以及如何使用这些滤镜效果来增强网页元素的视觉表现。这些滤镜最初应用于SVG，后来被纳入CSS3的Filter Effects规范，目前在Safari和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值