CSS3中 filter(滤镜) 属性的用法！

最新推荐文章于 2022-05-24 19:32:49 发布
最新推荐文章于 2022-05-24 19:32:49 发布
阅读量413 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42702425/article/details/83653211
版权
filter是什么？
  1. filter，CSS3中新增的一个属性，就是滤镜的意思；
  2. 可以对网页中的图片进行类似Photoshop图片处理的效果；
  3. filter主要是运用在图片上，以实现一些特效。
filter支持的效果有哪些？
  1. grayscale 灰色； 值为0-1之间的小数或者0%-100%之间百分比
    在这里插入图片描述
  2. sepia 褐色； 值为0-1之间的小数或者0%-100%之间百分比
    在这里插入图片描述
  3. saturate 饱和度； 值为num
    在这里插入图片描述
  4. blur 模糊度； 值为length(px)
    在这里插入图片描述
  5. brightness() 模糊度； 值为0-1之间的小数或者0%-100%之间百分比
    在这里插入图片描述
  6. invert() 反色； 值为0-1之间的小数或者0%-100%之间百分比
    在这里插入图片描述
  7. drop-shadow()； 阴影效果
    在这里插入图片描述
  8. hue-rotate()； 色相旋转 值为0deg-360deg之间,超过360deg又重新开始
  9. opacity()； 透明度 值为0-1之间的小数或者0%-100%之间百分比
  10. contrast(%)；调整图像的对比度 值为0-1之间的小数或者0%-100%之间百分比
    在这里插入图片描述
铛铛猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
12-16
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法，这里这是一个demo，大家可以根据这个demo安装自己的需求修改
CSS filter滤镜属性使用
YunWisdom
12-27 9656
CSS的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，通过CSS对图像进行处理，CSS的filter属性可以得到一些类似PS的滤镜效果。浏览器支持情况：只有IE浏览器不支持filter（滤镜）属性，为了兼容低版本的safari和google浏览器，需要加上前缀-webkit-。
学习 filter属性 和 常用方式
小小的前端
06-04 432
filter属性 filter CSS属性 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。 原图 blur(px) 模糊 函数将高斯模糊应用于输入图像。值越大越模糊，默认是0，不设置模糊。单位是px,不接受百分比值。 .img { margin-left: 50px; filter: blur(5px); } brightness(%) 亮度 函数将线性乘法器应用于输入图像，使其变暗或变亮。值为 0％ 生成全黑图像。值为 100％ 保持不变。值超过100%也是可
CSS——滤镜（filter ）
YANGMENGZHENG的博客
10-27 3736
前言 滤镜这个词我们不陌生，最常见的就是相机中的滤镜或者说PhotoShop 之类的制图软件。我们用滤镜来美化图片。而在 CSS 中，我们无需借助任何软件也可以实现很多种滤镜效果，例如模糊效果、透明效果、色彩反差调整、色彩反相等等。另外，通过 CSS 中的滤镜还能对网页中的元素或者视频进行处理。 一、什么是滤镜 对图像、图像进行的视觉处理(模糊、饱和度、对比度等)。 二、滤镜的实现---filter属性 1、CSS语法 filter: none | blur() | brightness(.
CSS滤镜（filter）
热门推荐
zg0601的博客
10-23 1万+
目录 1、概念 2、使用 3、常用filter函数 4、常用滤镜实例
CSS3 filter(滤镜用法)
匿名丶OC
05-02 684
这里是html代码 <p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p><img src="pineapple.jpg" alt="Pineapple" width="300" height="300"> <img class="blur" src="pineapple.jpg" alt="Pineapple" width="300
CSS3 滤镜 webkit-filter详细介绍及使用方法
01-19
大家可能对Instagram 这款iPhone APP 上的滤镜效果很感兴趣，其实 CSS3 开始也有滤镜（不是 IE 的那种滤镜），这些滤镜效果最初是用于 SVG 的，W3C 将其引入到 CSS3 中，然后制定了 CSS Filter Effects 1.0 的规范，...
【css技巧】CSS filter的神奇用法 | 褪色|融合效果等
坚信万物皆可切的切图仔
09-17 2728
前言 我们在处理图片时，经常使用的一个功能就是滤镜，它能使一张图像呈现各种不同的视觉效果。 在 CSS 中，也有一个filter属性，让我们能用 CSS 代码为元素指定各种滤镜效果，比如模糊、灰度、明暗度、颜色偏移等。 CSS filter的基础使用非常简单，CSS 标准里包含了一些已实现预定义效果的函数（下面blur、brightness、contrast等），我们可以通过指定这些函数的值来实现想要的效果： /* 使用单个滤镜 （如果传入的参数是百分数，那么也可以传入对应的小数：40% --> 0
CSS的filter使用
Celine
05-24 571
1、filter filter - CSS（层叠样式表） | MDNCSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter 明亮度：用于hover的时候图片颜色变亮一部分 brightness()函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。值为0%将创建全黑图像。值为100%会使输入保持不变。 filter: ...
css中的filter属性语法说明
wucaijuan的专栏
12-21 4026
刚开始学css，开始遇到filter不懂什么意思后来到网上查了，觉得解释的很全面，就把它抠下来，以便自己经常来看看。 CSS滤镜的使用方法：filter:filtername(parameters)　即 filter:滤镜名称（参数）alpha：设置透明层次blur：创建高速度移动效果，即模糊效果chroma：制作专用颜色透明DropShadow：创建对象的固定影子FlipH：创建
CSS中filter属性的使用
weixin_33910759的博客
10-15 1604
filter 属性定义了元素的可视效果 blur 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊。 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 body { background-color: #000; color: skyb...
CSS filter滤镜的用法
07-18 100
    filter:filtername(parameters)　即 filter:滤镜名称（参数） 滤镜效果                   功能描述 Alpha                      设置不同的透明度变化效果 Blur                         建立模糊效果 DropShadow           建立一种偏移的影象轮廓，即投射阴影 Flip...
CSS3 filter(滤镜) 属性
蚁族的奋斗的博客
12-26 226
[CSS]滤镜用法(1)
weixin_30687051的博客
04-28 124
滤镜效果 功能描述 Alpha ...
CSS3 强大的Filter详解（改变模糊度 亮度 透明度等方法）
c_qianxia5040的博客
12-15 3952
1.模糊 blur 值为length filter: blur(9px); 2.灰度 grayscale 值为0-1之间的小数 filter: grayscale(1); 3.亮度 brightness 值为0-1之间的小数 filter: brightness(2.3); 4.对比度 contrast 值为num filter: contrast(4.4); 5.饱和度 saturate 值为num filter: saturate(3.6); 6.色相旋转 hue-rota
css中的滤镜,CSS中的filter(滤镜)属性
weixin_35755823的博客
08-04 465
1、定义filter，从字面意思来看就是滤镜，官方定义filter属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)；举个栗子：img{/*灰度100%*/-webkit-filter:grayscale(100%);}2、语法filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | h...
filter如何设置例外的请求
iqbon的烂笔头
06-25 691
在web.xml声明的一个filter中： &lt;!– session过滤filter –&gt; &lt;filter&gt; &lt;filter-name&gt;SessionFilter&lt;/filter-name&gt; &lt;filter-class&gt; com.iqbon.jcms.web.util.SessionFilter &lt;/filter-cla...
css3属性 -webkit-filter用法
没有感情的代码机器的博客
01-13 1269
说明 CSS滤镜属性，可以在元素呈现之前，为元素的渲染提供一些效果，如模糊、颜色转移之类的。滤镜常用于调整图像、背景、边框的渲染。 语法 -webkit-filter:none | blur(px) | brightness() | contrast() | grayscale() | hue-rotate(deg) | invert() | opacity() | saturate() | s...
Filter过滤器（思维导图）
a219219219219的博客
07-30 746
css样式 filter
最新发布
08-20
CSS样式的filter属性可以用于对元素进行各种图像效果的处理。根据提供的引用内容，其中包含了三种常见的filter效果：高斯模糊、饱和度和对比度。 高斯模糊通过设置filter的blur属性来实现，其中blur的值可以是像素(px)单位。例如，filter: blur(10px)可以将元素的背景模糊化。 饱和度通过设置filter的saturate属性来实现，其中saturate的值可以是百分比(%)单位。例如，filter: saturate(300%)可以增加元素的饱和度。 对比度通过设置filter的contrast属性来实现，其中contrast的值也可以是百分比(%)单位。例如，filter: contrast(150%)可以增加元素的对比度。 通过使用这些filter属性，可以很方便地对元素进行图像处理，实现各种视觉效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [css 样式之 filter 滤镜属性 用法与示例](https://blog.csdn.net/weixin_50339217/article/details/126406234)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值