css3 中的filter使用

最新推荐文章于 2022-12-27 15:02:17 发布
最新推荐文章于 2022-12-27 15:02:17 发布
阅读量341 收藏
点赞数
分类专栏： 前端 文章标签： filter css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22533095/article/details/50509970
版权

    filter的作用就是像对图像和视频产生各种各样的效果，这个仅仅只有webkit内核的浏览器支持。

    html结构

<span style="font-family:Arial;font-size:14px;">img{
    margin-left: 10px;
}
<body>
    <img src="a.jpg" height="510" width="510">
    <img src="a.jpg" height="510" width="510" class="change">
</body></span>
    效果一:grayscale灰度，值的范围0~1 
<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:grayscale(1);
        }</span>

    效果二:sepia褐色图像，值的范围0~1

<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:sepia(300);
        }</span>

     效果三:saturate饱和度,值的范围0~n 
<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:saturate(0.1);
        }</span>

    感觉还好对吧，下面请接受惊吓。 
<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:saturate(30);
        }</span>

     效果四:hue-rotate,取值范围0~360deg

<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:hue-rotate(175deg);
        }</span>

    效果五:invert反色，取值范围0~1 
<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:invert(1);
        }</span>


    效果六:opacity透明度,取值范围0~1 
<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:opacity(.2);
        }</span>

    效果七:brightness亮度,0~n

<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:brightness(0.5);
        }</span>

 
<span style="font-family:Arial;font-size:14px;">        .change{
           -webkit-filter:brightness(5);
        }</span>

    效果八:contrast对比度，取值0~n

        .change{
           -webkit-filter:contrast(2);
        }


    效果九:blur模糊

        .change{
           -webkit-filter: blur(4px);
        }

   效果10:drop-shadow 阴影

        .change{
           -webkit-filter: drop-shadow(5px 5px 5px red);
        }

     其实以上的各种效果是可以多个混合使用的。下面做一下总结

grayscale灰度，值的范围0~1

sepia褐色图像，值的范围0~1

saturate饱和度,值的范围0~n

hue-rotate,取值范围0~360deg

invert反色，取值范围0~1

opacity透明度,取值范围0~1

brightness亮度,0~n

contrast对比度，取值0~n

blur模糊，取值npx

drop-shadow 阴影，取值(npx npx npx color)

辛丙亮
关注
专栏目录
CSS3 filter(滤镜用法)
匿名丶OC
05-02 702
这里是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
CSS filter滤镜的用法
07-18 113
    filter:filtername(parameters)　即 filter:滤镜名称（参数） 滤镜效果                   功能描述 Alpha                      设置不同的透明度变化效果 Blur                         建立模糊效果 DropShadow           建立一种偏移的影象轮廓，即投射阴影 Flip...
CSS3 filter(滤镜) 使用
u012857153的博客
03-11 536
图片做模糊的处理
CSS3中 filter(滤镜) 属性的用法！
qq_42702425的博客
11-02 460
filter是什么？ filter，CSS3中新增的一个属性，就是滤镜的意思； 可以对网页中的图片进行类似Photoshop图片处理的效果； filter主要是运用在图片上，以实现一些特效。 filter支持的效果有哪些？ grayscale 灰色； 值为0-1之间的小数或者0%-100%之间百分比 sepia 褐色； 值为0-1之间的小数或者0%-100%之间百分比 saturate...
关于css3中的filter滤镜属性使用详解
qwguo
05-28 1147
‘以前我们要处理一张图片的取色，模糊，褐色等效果必须使用Photoshop处理完后保存多张图片，而css3滤镜的出现使我们在网站中想要轻松实现这些效果变得可能。只需要通过filter滤镜的各种属性就能轻松实现，如：grayscale(灰色)、sepia(褐色)、saturate(饱和度)、blur(模糊)…等’ css3中的filter滤镜使用 filter 滤镜，借鉴了Photoshop的滤镜效果，在ps中主要用来设置图层图片的模糊，颜色的高亮，对比度等效果，在css中滤镜通常用于调整图像，背景和边.
CSS中filter属性的使用详解
09-22
CSS中的filter属性是一个非常实用且功能强大的工具，主要用于...需要注意的是，虽然大多数现代浏览器都支持filter属性，但不同浏览器对于CSS3属性的支持程度可能会有所不同，因此在使用时需要考虑到浏览器兼容性问题。
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
12-16
首先，`filter`属性是CSS3中引入的一个功能，用于应用图像操作效果，如模糊、灰度、饱和度调整等。其语法格式如下： ```css filter: function-name(arg1, arg2,...) | none | inherit; ``` 其中，`function-name`...
css3 filter属性在项目中的应用
weixin_30721077的博客
09-01 81
css3 属性filter应用在项目里. 语法：<filter>：要使用的滤镜效果。多个滤镜之间用空格隔开。设置或检索对象所应用的滤镜效果。 最常用的滤镜效果是不透明效果，如果要实现50%的不透明度（其它高级浏览器的实现参阅opacity）：实例：HTML： 1 <!DOCTYPE html> 2 <html> 3 <hea...
使用RGBa和Filter实现不影响子元素的CSS透明背景
weixin_33962621的博客
04-05 207
原文发表于 2010.1.11 shukebeta 翻译 译者按：这篇文章里提到的IE解决方案，还是有一些问题的。且不说IE9既支持RGBa又支持Filter会给我们带来麻烦，过滤器这种东西说不准 啥时候就会导致渲染问题。我建议对支持rgba的浏览器只使用rgba，同时为不支持rgba的浏览器留一个非透明背景的退路。以下为原文译文： 今天的网页设计，几乎毫无例外地包含一些半透明元素，然而，...
CSS filter滤镜属性使用
YunWisdom
12-27 1万+
CSS的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，通过CSS对图像进行处理，CSS的filter属性可以得到一些类似PS的滤镜效果。浏览器支持情况：只有IE浏览器不支持filter（滤镜）属性，为了兼容低版本的safari和google浏览器，需要加上前缀-webkit-。
用hue-rotate做不断变换的色调
Qyingya的博客
03-04 1805
下面是HTML和scc的源码 @keyframes规则 在动画的过程中，可以多次更改css样式设定 0%是开头动画，100%是当动画完成 ransform 用于2D或3D转换的元素 filter: hue-rotate(0deg); 色调旋转滤镜 过滤器（Filter） - 过滤器在请求处理程序执行请求之前或之后，执行某些任务 hue-rotate色调旋转滤镜 filter: hue-rotate(360deg); 一个色调360度不断旋转 ...
【css】图片染色
richest_qi的博客
08-15 499
hsla() h hue，色相，值范围：0~360，调节基本色 s saturation，饱和度，值范围:0%~100% 饱和度越高，颜色越鲜艳 l lightness，亮度，值范围：0%～100% 0%，黑色 100%，白色 a alpha，透明度，值范围：0%～100% 0%，完全透明 100%，实色 hsla(360,100%,0%)，黑色 hsla(360,100%,0%,100%)，黑色 hsla(360,100%,0%,0%)，白色 滤镜 filter:sepia() | saturate(
颜色值
crystalNB的专栏
10-29 1438
HSB:       H:  色调 （hue）范围 [0, 360)       S:  饱和度（saturation） 范围[0, 100%]             它表示 H、100%S、100%B组合成的颜色 与 白色的混合，前者所占的比例。例如 HSB 与RBG的换算：             假设，HSB分别为：30、100%、100%，那么他对应的RGB值是：255、127.
用hue-rotate实现动态渐变背景动画(css)
热门推荐
weixin_62650212的博客
12-15 1万+
使用 hue-rotate 实现动态渐变背景动画。这种方法应该是实现渐变背景动画的比较好的方法。只使用一个动画，短短几行代码实现。
css中filter的功能测试
富在术数不在劳身,利在势局不在力耕。
12-02 432
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css中filter属性的使用</title> <style> img{ width: 100px; } div{ float: left; text-align: center; margin-left: 15px; padding: 4px; ...
css 样式之 filter 滤镜属性 用法与示例
weixin_50339217的博客
08-18 5610
css 样式之滤镜 filter 属性
【CSS3】 filter(滤镜)属性
xyue_的博客
05-02 1916
CSS3 filter过滤、滤镜属性 总结
css3 filter
最新发布
09-05
CSS3 filter是一组属性，用于为图像添加各种视觉效果和滤镜效果。它可以实现模糊、亮度调节、对比度调节、阴影设置、灰度、色相旋转、反转图像输入、透明度、饱和度和褐色转化等效果。 其中，filter:blur(px)可以使用高斯模糊效果，filter:brightness(%)可以调节亮度，filter:contrast(%)可以调节对比度，filter:drop-shadow(offset-x offset-y blur spread color)可以设置阴影，filter:grayscale(%)可以实现灰度效果，filter:hue-rotate(deg)可以应用色相旋转，filter:invert(%)可以反转图像输入，filter:opacity(%)可以调节透明度，filter:saturate(%)可以调节饱和度，filter:sepia(%)可以进行褐色转化。 例如，filter:hue-rotate(55deg)可以根据色相环的度数对应相应的颜色。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [css3 filter滤镜属性制作图片滤镜特效 ](https://download.csdn.net/download/siwim/11984144)[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: 33.333333333333336%"] - *2* [CSS3 filter滤镜详解](https://blog.csdn.net/pycharm_k/article/details/105583337)[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: 33.333333333333336%"] - *3* [CSS3的filter属性](https://blog.csdn.net/qq_44849271/article/details/120113819)[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: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值