当前位置:首页 > 前端技术 > css实现滤镜效果

css实现滤镜效果

2022年09月17日 19:20:07前端技术4

CSS3 filter(滤镜)

在查看vue官网的时候,

发现这个效果是 用的css3 filter

css实现滤镜效果 _ JavaClub全栈架构师技术笔记

这个效果还是挺不错的。

使用 filter

这个使用场景也挺多的,
可以对 div , img … 等等标签 进行设置

img {
     
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

值:

CSS 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Filter 描述
none 默认值,没有效果。
blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊; 如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。
brightness(%) 给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。
contrast(%) 调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。
drop-shadow(h-shadow v-shadow blur spread color) 给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受(在CSS3背景中定义)类型的值,除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下:``**<offset-x>** **<offset-y>** (必须)这是设置阴影偏移量的两个 <length>值. **<offset-x>** 设定水平方向距离. 负值会使阴影出现在元素左边. **<offset-y>**设定垂直距离.负值会使阴影出现在元素上方。查看**<length>**可能的单位.**如果两个值都是0**, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>,会有模糊效果).**<blur-radius>** (可选)这是第三个code><length>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值 若未设定,默认是0 (则阴影的边界很锐利).**<spread-radius>** (可选)这是第四个 <length>值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器 不支持第四个长度,如果加了也不会渲染。 **<color>** (可选)查看 <color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用color**color**属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;
hue-rotate(deg) 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。
invert(%) 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。
opacity(%) 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。
saturate(%) 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。
sepia(%) 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;
url() URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。例如:filter: url(svg-url#element-id)
initial 设置属性为默认值,可参阅: CSS initial 关键字
inherit 从父元素继承该属性,可参阅:CSS inherit 关键字

dome

<!DOCTYPE html>
<html>

<head>
  <style>
    img {
       
      width: 33%;
      height: auto;
      float: left;
    }

    #app {
       
      display: flex;
      flex-wrap: wrap;
    }

    #app div {
       
      width: 400px;
      margin: 15px;
    }

    #app div img {
       
      width: 100%;
    }

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

    .brightness {
       
      -webkit-filter: brightness(0.30);
      filter: brightness(0.30);
    }

    .contrast {
       
      -webkit-filter: contrast(180%);
      filter: contrast(180%);
    }

    .grayscale {
       
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
    }

    .huerotate {
       
      -webkit-filter: hue-rotate(180deg);
      filter: hue-rotate(180deg);
    }

    .invert {
       
      -webkit-filter: invert(100%);
      filter: invert(100%);
    }

    .opacity {
       
      -webkit-filter: opacity(50%);
      filter: opacity(50%);
    }

    .saturate {
       
      -webkit-filter: saturate(7);
      filter: saturate(7);
    }

    .sepia {
       
      -webkit-filter: sepia(100%);
      filter: sepia(100%);
    }

    .shadow {
       
      -webkit-filter: drop-shadow(8px 8px 10px green);
      filter: drop-shadow(8px 8px 10px green);
    }
  </style>
</head>

<body>

  <p><strong>注意:</strong> Internet Explorer 不支持 filter 属性。</p>

  <div id="app">
    <div>
      <img src="https://img-blog.csdnimg.cn/20210129144944389.jpg" alt="Pineapple" width="300" height="300">
      <p>正常图片</p>
    </div>

    <div>
      <img class="blur" src="https://img-blog.csdnimg.cn/20210129144944389.jpg" alt="Pineapple" width="300" height="300">
      <p>filter: blur(4px);</p>
      <p>给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊; 如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。</p>
    </div>
    <div>
      <img class="brightness" src="https://img-blog.csdnimg.cn/20210129144944389.jpg" alt="Pineapple" width="300"
        height="300">
      <p>filter: brightness(0.30);</p>
      <p>给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。</p>
    </div>
    <div>
      <img class="contrast" src="https://img-blog.csdnimg.cn/20210129144944389.jpg" alt="Pineapple" width="300"
        height="300">
        <p>filter: contrast(180%);</p>
        <p>调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。</p>
    </div>
    <div>
      <img class="grayscale" src="https://img-blog.csdnimg.cn/20210129144944389.jpg" alt="Pineapple" width="300"
        height="300">
        <p>filter: grayscale(100%);</p>
        <p>将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;</p>
    </div>
    <div>
      <img class="huerotate" src="https://img-blog.csdnimg.cn/20210129144944389.jpg" alt="Pineapple" width="300"
        height="300">
        <p>filter: hue-rotate(180deg);</p>
        <p>给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。</p>
    </div>
    <div>
      <img class="invert" src="https://img-blog.csdnimg.cn/20210129144944389.jpg" alt="Pineapple" width="300"
        height="300">
        <p>filter: invert(100%);</p>
        <p>反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。</p>
    </div>
    <div>
      <img class="opacity" src="https://img-blog.csdnimg.cn/20210129144944389.jpg" alt="Pineapple" width="300"
        height="300">
        <p>filter: opacity(50%);</p>
        <p>转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。</p>
    </div>
    <div>
      <img class="saturate" src="https://img-blog.csdnimg.cn/20210129144944389.jpg" alt="Pineapple" width="300"
        height="300">
        <p>filter: saturate(7);</p>
        <p>转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。</p>
    </div>
    <div>
      <img class="sepia" src="https://img-blog.csdnimg.cn/20210129144944389.jpg" alt="Pineapple" width="300"
        height="300">
        <p>filter: sepia(100%);</p>
        <p>将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;</p>
    </div>
    <div>
      <img class="shadow" src="https://img-blog.csdnimg.cn/20210129144944389.jpg" alt="Pineapple" width="300"
        height="300">
        <p>filter: drop-shadow(8px 8px 10px green);</p>
        <p>drop-shadow(h-shadow v-shadow blur spread color)	</p>
        <p>给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受shadow(在CSS3背景中定义)类型的值,除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。</p>
    </div>

  </div>

</body>

</html>

css实现滤镜效果 _ JavaClub全栈架构师技术笔记

最后

这个 用来做过度 或者特效动画 还是挺好的。

点赞 收藏 不吃亏

css实现滤镜效果 _ JavaClub全栈架构师技术笔记

作者:厚渡
来源链接:https://blog.csdn.net/dwp_wz/article/details/113387478

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42880.html

标签: css
分享给朋友:

“css实现滤镜效果” 的相关文章

用HTML5/CSS3/JS开发Android/IOS应用

用HTML5/CSS3/JS开发Android/IOS应用

现在人人都想成为安卓/IOS应用开发工程师。其实,安卓/IOS应用可以用很多种语言来实现。由于我们前端开发工程师,对HTML5/CSS/JavaScript的网络编程已经相当熟悉了。所以,今天大家将会认识到一些利用前端语言来开发安卓/IOS应用的工具。  在...

springmvc如何引入css等资源

   配置文件: <mvc:resources location="/WEB-INF/css/" mapping="/css/**" />     <mvc:resources location="...

css去除html中a标签的默认样式

html中a标签的默认样式实在是太丑,这简直是对前端程序猿的一种蹂躏!!!所以通常情况下需要去除a标签的默认样式。 以下代码是在a标签的不同状态下去除默认的下划线,如果要修改颜色、字体等,在对应位置添加css样式即可。 /*去除a...

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 用span标签设置div内放一段文字中的部分文字字体颜色方法。 一段文字放在DIV内或P内,当我们设置div或p...

CSS放置显示a标签的下划线

  text-decoration: underline; text-decoration属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through) 作者:迷豆腐 来源链接:https://blog.cs...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

CSS文字样式

notice:文字样式会被继承 一、常用的文字样式 1、设置文字的颜色    color:red; 2、设置文字的大小  font-size:30px; 3、设置文字的粗细,bold为加粗...

CSS 选取第几个标签元素

在前端开发中,我们可能会碰到这样的需求:想让列表中的第一个部分显示不同的样式 ,想让列表中的偶数部分显示不同的背景颜色,想让列表中的最后一部分样式不一样……这样的需求,我们怎样来实现?其实,如果前面文件是php开发的,可以通过php的循环语句+判断语句+css样式来实现。但是,如...

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

修改颜色,线条形状,粗细等... CSS代码: .zh_hr{ border:3px solid rgba(255, 255, 255, 0.50); margin-bottom: 2px; margin-top: 2px }...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。