返回顶部
首页 > 资讯 > 前端开发 > JavaScript >CSS3中filter属性有哪些
  • 935
分享到

CSS3中filter属性有哪些

2024-04-02 19:04:59 935人浏览 薄情痞子
摘要

小编给大家分享一下css3中filter属性有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!CSS3的滤镜filter属性,

小编给大家分享一下css3中filter属性有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

CSS3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果、老照片(黑白照片)、火焰效果等。

CSS3中filter属性有哪些

一、blur(px)高斯模糊

CSS3中filter属性有哪些

二、brightness(%)亮度

CSS3中filter属性有哪些

三、contrast(%)对比度

CSS3中filter属性有哪些

四、drop-shadow()阴影

CSS3中filter属性有哪些


注意: 这个 drop-shadow 与 box-shadow 都是在说阴影,但还是有区别的,看下图

CSS3中filter属性有哪些

图中火焰的图片,是一张png图片,除了火焰以外,其他部分是透明的,我们能看见,box-shadow 是给整个图片加阴影,而 drop-shadow 只是给不透明的部分加阴影,这是他们最重要的区别了。

五、grayscale(%)灰度

CSS3中filter属性有哪些

六、hue-rotate(deg)色相旋转

CSS3中filter属性有哪些

七、invert(%)反转

CSS3中filter属性有哪些

八、opacity(%)透明度

CSS3中filter属性有哪些

九、saturate(%)饱和度

CSS3中filter属性有哪些

十、sepia(%)深褐色

CSS3中filter属性有哪些

上面都只是把每种滤镜单独拿出来,展示效果,但是其实他们是可以一起使用的,比如这样

CSS3中filter属性有哪些

.all img{
    filter: brightness(120%) contrast(110%) saturate(120%) hue-rotate(-25deg) drop-shadow(0 0 5px #000);
}
WEB前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频,pdf

注:饱和度和对比度是两个完全不同的概念,饱和对是对色彩的浓度(纯度)的定义;对比度是对画面明暗程度的定义。

理论上说,对比度是指画面黑白明暗的层次;饱和度画面中色彩的鲜艳程度与层次;

以上是“CSS3中filter属性有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: CSS3中filter属性有哪些

本文链接: https://lsjlt.com/news/83861.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • CSS3中filter属性有哪些
    小编给大家分享一下CSS3中filter属性有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css3的滤镜filter属性,...
    99+
    2024-04-02
  • CSS3中filter滤镜属性有什么用
    这篇文章主要为大家展示了“CSS3中filter滤镜属性有什么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS3中filter滤镜属性有什么用”这篇文章吧...
    99+
    2024-04-02
  • css3中边距属性有哪些
    这篇文章主要介绍css3中边距属性有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! css3的两种边距属性:1、内边距属性(padding、paddi...
    99+
    2024-04-02
  • CSS3中动画属性有哪些
    这篇文章主要介绍了CSS3中动画属性有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。CSS3 动画虽然transition在一定的时间内...
    99+
    2024-04-02
  • css3中过度属性有哪些
    这篇文章主要介绍css3中过度属性有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! css3过度属性有:1、transition-property属性...
    99+
    2024-04-02
  • css3中新增属性有哪些
    css3中新增属性有:边框属性。(1)border-color:为边框设置颜色。(2)border-image:使用图片来创建边框。(3)border-radius:圆角边框。(4)box-shadow:用于向方框添加阴影。背景属性。通过b...
    99+
    2024-04-02
  • CSS3+新属性有哪些
    这篇文章主要介绍“CSS3+新属性有哪些”,在日常操作中,相信很多人在CSS3+新属性有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS3+新属性有哪些”的疑惑有所帮...
    99+
    2024-04-02
  • css3中的动画属性有哪些
    这篇文章主要为大家展示了“css3中的动画属性有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css3中的动画属性有哪些”这篇文章吧。   css3的动画...
    99+
    2024-04-02
  • css3中的转换属性有哪些
    这篇文章主要为大家展示了“css3中的转换属性有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css3中的转换属性有哪些”这篇文章吧。 ...
    99+
    2024-04-02
  • css3中属性选择器有哪些
    这篇文章主要讲解了“css3中属性选择器有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css3中属性选择器有哪些”吧! c...
    99+
    2024-04-02
  • css3中的新增属性有哪些
    这篇文章将为大家详细讲解有关css3中的新增属性有哪些,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。css3新增属性有:word-wrap、word-break、text-shadow、bo...
    99+
    2023-06-14
  • CSS filter属性的作用有哪些
    CSS filter属性用于对元素进行图像处理,可以改变图像的颜色、亮度、对比度、饱和度等。具体的作用包括:1. blur:模糊图像...
    99+
    2023-09-05
    CSS
  • CSS filter属性有哪些优缺点
    CSS filter属性的优点包括:1. 可以实现多种图像效果,如模糊、饱和度调整、对比度调整等,通过一行CSS代码即可实现。2. ...
    99+
    2023-10-20
    CSS
  • CSS3高级属性有哪些
    这篇文章将为大家详细讲解有关CSS3高级属性有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 CSS3多列属性有很多,我们一一来介绍一下,包括以下几个属性: 1、...
    99+
    2024-04-02
  • CSS3背景属性有哪些
    本篇内容介绍了“CSS3背景属性有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! CSS3 ...
    99+
    2024-04-02
  • css3多列属性有哪些
    本篇内容主要讲解“css3多列属性有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3多列属性有哪些”吧!多列属性1、column-count属性规定元...
    99+
    2024-04-02
  • css3有哪些布局属性
    本篇内容主要讲解“css3有哪些布局属性”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3有哪些布局属性”吧! css3布局属性...
    99+
    2024-04-02
  • css3动画属性有哪些
    本篇内容主要讲解“css3动画属性有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3动画属性有哪些”吧! css3三大动画...
    99+
    2024-04-02
  • CSS3中强大filter属性怎么用
    这篇文章主要介绍了CSS3中强大filter属性怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1、定义   filter,从字面意思来...
    99+
    2024-04-02
  • CSS3中filter属性的使用方法
    小编给大家分享一下CSS3中filter属性的使用方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!最近在修改内网门户的时候,恰好遇到了需要使用滤镜的地方;刚开始...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作