css的filter属性

最新推荐文章于 2024-04-23 19:06:37 发布
最新推荐文章于 2024-04-23 19:06:37 发布
阅读量511 收藏 4
点赞数
分类专栏： git 文章标签： css python html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48085286/article/details/120164101
版权

1.官方文档

注意：Internet Explorer 不支持 filter 属性
https://www.runoob.com/cssref/css3-pr-filter.html

2属性

2.1blur

给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；
在这里插入图片描述

2.2brightness

给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1
在这里插入图片描述

2.3contrast

调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

在这里插入图片描述

2.4grayscale

在这里插入图片描述

2.5hue-rotate

给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
在这里插入图片描述

2.6invert

反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。

在这里插入图片描述

2.7opacity：

转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
在这里插入图片描述

2.8saturate：

转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。
在这里插入图片描述

2.9sepia：

将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
在这里插入图片描述

2.10drop-shadow：

给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。
在这里插入图片描述

3.完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
	</head>
	<style>
		.mauto{
			width: 400px;
			margin: 20px auto;
			text-align: center;
			color: #999;
		}
		img {
			width: 200px;
			height: 200px;
			margin: 20px;
		}
		.text{
		    position: relative;
		    transform:  perspective(0.5em) rotateX(10deg);
		    transform-origin: bottom left;
		    background: lightblue;
		    display: inline-block;
		    margin-bottom: 20px;
		    font-size: 40px;
		}
		.text::after {
		    display: inline-block;
		    content: 'css的filter属性';
		    transform:  perspective(0.5em) rotateX(-10deg);
		    transform-origin: bottom left;
		}
		.blur {
			-webkit-filter: blur(4px);
			filter: blur(4px);
		}
		.brightness {
			-webkit-filter: brightness(0.30);
			filter: brightness(0.30);
		}
		.contrast {
			-webkit-filter: contrast(60%);
			filter: contrast(60%);
		}
		.grayscale {
			-webkit-filter: grayscale(100%);
			filter: grayscale(100%);
		}
		.huerotate {
			-webkit-filter: hue-rotate(20deg);
			filter: hue-rotate(20deg);
		}
		.invert {
			-webkit-filter: invert(30%);
			filter: invert(30%);
		}
		.opacity {
			-webkit-filter: opacity(30%);
			filter: opacity(30%);
		}
		.saturate {
			-webkit-filter: saturate(2); 
			filter: saturate(2);
		}
		.sepia {
			-webkit-filter: sepia(80%);
			filter: sepia(80%);
		}
		.shadow {
			-webkit-filter: drop-shadow(8px 8px 10px #00);
			filter: drop-shadow(8px 8px 10px #000);
		}
	</style>
<body>
	<section class="mauto">
		<div class="text"></div>
	</section>
	<section class="mauto">
		<p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>
	</section>
	<section class="mauto">
		<p><strong>blur：</strong>给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；</p>
		<img class="blur" src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" alt="Pineapple" >
	</section>
	<section class="mauto">
		<p><strong>brightness：</strong>给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1</p>
		<img class="brightness" src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" alt="Pineapple">
	</section>
	<section class="mauto">
		<p><strong>contrast：</strong>调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。</p>
		<img class="contrast" src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" alt="Pineapple" >
	</section>
	<section class="mauto">
		<p><strong>grayscale：</strong>将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；</p>
		<img class="grayscale" src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" alt="Pineapple">
	</section>
	<section class="mauto">
		<p><strong>hue-rotate：</strong>给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。</p>
		<img class="huerotate" src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" alt="Pineapple">
	</section>
	<section class="mauto">
		<p><strong>invert：</strong>反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。</p>
		<img class="invert" src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" alt="Pineapple" >
	</section>
	
	<section class="mauto">
		<p><strong>opacity：</strong>转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。</p>
		<img class="opacity" src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" alt="Pineapple" >
	</section>
	<section class="mauto">
		<p><strong>saturate：</strong>转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。</p>
		<img class="saturate" src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" alt="Pineapple" >
	</section>
	<section class="mauto">
		<p><strong>sepia：</strong>将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；</p>
		<img class="sepia" src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" alt="Pineapple" >
	</section>
	
	<section class="mauto">
		<p><strong>drop-shadow：</strong>给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。</p>
		<img class="shadow" src="https://i.postimg.cc/mgsKJGLw/susu1.jpg" alt="Pineapple">
	</section>
</body>
</html>

4.更多代码

https://gitee.com/susuhhhhhh/css_demos

苏苏哇哈哈
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
filter滤镜实现img图片的CSS蒙版效果、模糊效果
草巾冒小子的博客
06-23 4339
filter滤镜实现img图片的CSS蒙版效果、模糊效果 项目中我们经常会遇到这样的需求：图片在鼠标经过或者悬停的时候，出现一层模糊的蒙版效果。 这里将会用到：filter这一属性。 文章目的：总结一下该属性，及img图片模糊的蒙版效果的实现方法。 下面我们就来总结一下，这层模糊的蒙版效果的实现方法。 首先看一下效果图。 1. 效果图 ...
css的fliter属性实现页面变灰的效果
qq_62693649的博客
12-07 299
最近大部分网站的页面都变灰了，以示哀悼。出于好奇，了解了一下怎么让页面变灰而不用出现布局。fliter属性：可以将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染;它可以设置grayscale滤镜函数，也即是灰色滤镜，设置值为0为默认值，原始页面；设置值为1可以让页面完全变灰。 效果：
前端css中filter(滤镜)的使用
最新发布
小蜗牛764号的博客
04-23 915
前面的几篇博文用到了模糊(blur)和阴影(solid)的效果，这些效果有些属于filter(滤镜)的属性。filter还有其他属性，下面表格汇总相关的语法。内容语法说明模糊blur(A);A填像素值，如5px阴影a为水平方向阴影位置，正数px向右；b为垂直方向阴影位置，正数px向下；c为阴影的范围，px；d为颜色参数常用rgba的格式亮度e>1加亮度，e1加对比度，f
三种方法使图片变成灰色（前端技术）
热门推荐
huangpb的博客
03-03 3万+
1、CSS Filter 使用CSS过滤器属性可能是最简单的方法把图像变成灰度。以往,IE浏览器有一个专有的CSS属性称为过滤应用自定义效果包括灰度。 现在,过滤器属性是CSS3规范的一部分,并支持在一些浏览器,Firefox、Chrome和Safari。以前,我们也提到Webkit过滤器,它不仅将图像变成灰色也可以变成褐色和模糊效果。 添加如下CSS样式可以将图像变成灰色 img {
CSS3滤镜——页面黑白灰度处理
Crane的博客
04-08 4103
每当遭遇重大灾难，比如之前的非典、汶川地震，以及前几天清明节对新冠肺炎逝世同胞的哀悼，各大主流网站也会呈黑白两色。今天偶然搜了下实现机制，原来是如此的简单，也对之前不怎么了解的滤镜刮目相看了。 将以下样式代码放到页面中即可实现页面黑白处理，这是CSS3滤镜中的灰度滤镜（grayscale）。 html,body { -webkit-filter: grayscale(1); /* C...
CSS中的filter(滤镜)
weixin_45663702的博客
05-18 5894
CSS中的filter(滤镜)
CSS filter属性详解
01-08
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。 CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜，通过一个URL链接到SVG滤镜元素(SVG filter...
CSS中filter属性的使用详解
09-22
主要介绍了CSS中filter属性的使用详解，css3中的filter属性可以说是简单易用且强大，filter 属性定义了元素的可视效果，非常具有实用价值，需要的朋友可以参考下
CSS Filter背景透明提示
09-05
CSS Filter属性允许开发者对元素的视觉输出应用各种图像处理效果。这些效果包括模糊、灰度、饱和度调整、对比度调整等，还可以实现像Alpha透明这样的功能。在CSS3中，Filter属性的使用方式如下： ```css element { ...
CSS3 中filter（滤镜）属性使用详解
11-21
css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，通过css对图像进行处理。 浏览器支持情况：只有IE浏览器不支持filter（滤镜）属性，为了兼容低版本的safari和google浏览器，需要加上...
CSS的filter属性详解
m0_74293254的博客
11-29 2656
上述代码将给class为"invert-element"的元素应用一个反色效果，使图像的颜色与原来相反，亮度和对比度保持不变。上述代码将给class为"opacity-element"的元素应用一个透明效果，使元素的透明度降低到原来的50%。上述代码将给class为"grayscale-element"的元素应用一个灰度效果，使图像变为原来亮度的50%。上述代码将给class为"grayscale-sepia-saturate"的元素应用一个灰度、褐色和饱和度增强的效果，使图像呈现出复古的灰色调。
＜ CSS小技巧：filter滤镜妙用＞
一个平平无奇的技术宅
01-12 1377
在前端开发中，所有页面都是以渲染的方式，通过HTML + CSS渲染出来的。本质来说，就是一些可以根据逻辑互动的图形元素组成，而在有些时候，我们往往需要拿我们对图片的理解去实现一些样式。为此，CSS中存在filter滤镜这个属性，去实现一些比较特殊的图形渲染方式。
整个网页变黑白的CSS代码
BlueKitty的博客
11-14 9953
1 . 网页黑白代码内部样式 , 写入html标签 &lt;html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);"&gt; 2 . 网页黑白代码内部样式 , 写入head标签里面 &lt;style type="text...
CSS设置元素，图片，整站变灰效果
Noctis99的博客
01-29 1937
s
【译】像CSS一样在Flutter里应用滤镜效果
xiaodongbi的博客
09-07 818
在 CSS 世界里，我们可以非常方便地通过filter属性给任意组件和元素添加滤镜效果，现在我们让 Flutter 也支持这样玩了。(PS: 文章老早就想发了，无奈中间插了太多事情拖到今天)
借助CSS3的filter滤镜实现灰色主题模式
是小宗啊？的博客
12-10 839
国家哀悼日，各大网站会将主题变成灰白色。突然又想起了汶川大地震，悲痛。 其实实现的方式很简单，使用css3滤镜中grayscale(%)灰度函数。 如何使用如下： <button onclick="javascript:document.body.setAttribute('style','filter: grayscale(100%)')">开启灰色模式</button> <button onclick="javascript:document.body.setAttribu
html给页面设置一个置灰,css3 – 想要将整个页面设置为灰度,除了指定的div
weixin_31207903的博客
06-03 1129
我有一个css代码,可以使整个页面灰度.html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);filter: grayscale(100%);}我现在想在一个不受影响的div中嵌入一个iframe.我搜索了解决方案和fount：not selector.当我在http://www.w3.org/TR/css3-sele...
css图片/页面显示灰色
wilL-my的博客
08-26 681
img { -webkit-filter: grayscale(100%); /* Webkit */ filter: gray; /* IE6-9 */ filter: grayscale(100%); /* W3C */ } 页面变灰直接在html节点添加grayscale即可 页面展示其它品牌logo利用先灰度展示，hover时filter:none;展示原本颜色，再给img加一个transition:all .5s;也有不错的显示效果。 f.
css filter属性
09-09
CSS的filter属性用于对元素应用图形效果，可以改变元素的外观，包括但不限于颜色、亮度、对比度和模糊等。 常见的filter属性值包括： 1. blur：给元素应用高斯模糊效果，可以指定模糊半径。 2. brightness：调整...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值