文档章节

css3中强大的filter(滤镜)属性

o
 osc_wws45aot
发布于 2019/08/21 10:35
字数 632
阅读 3
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧。当然,这个属性的效果肯定不能跟ps相比,但是利用的好的话可以在节约很多空间下,把一张图做成两张图的效果。

 

     

1定义  

 

    filter,从字面意思来看就是滤镜,官方定义filter属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度);举个栗子:

复制代码
<style>
    img{
      /*灰度100%*/ -webkit-filter:grayscale(100%); } </style> <img src="img/boke.png" alt="">
复制代码

 

    看到这个效果,博友们是不是都开始对filter开始感兴趣了呢 ?
     

2语法

 
    filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
    可以看到,属性有很多可选值,他们都是什么意思呢?
    
  • 1  grayscale灰度

    2  sepia褐色(有种复古的旧照片感觉)

    3  saturate饱和度

    4  hue-rotate色相旋转

    5  invert反色

    6  opacity透明度

    7  brightness亮度

    8  contrast对比度

    9  blur模糊

   0  drop-shadow阴影

    举个栗子:

    这里用sepia调整

复制代码
1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .img{
6 -webkit-filter:sepia(70%); 7 } 8 </style> 9 </head> 10 <body> 11 <img src="img/boke.png" alt=""> 12 <img class="img" src="img/boke.png" alt=""> 13 </body>
复制代码

示例图片:

 

     

3示例  

   
 
    下面,对filter属性的其中几个值做一个示例,其他好玩的东西需要博友们一起发掘,有啥好玩的可以跟我一起分享哟
    
(1)hue-rotate(色彩旋转)
 
       效果看图吧,具体使用效果要靠大家发掘:
        
复制代码
1    <style>
 2         .img{
 3             -webkit-filter:hue-rotate(330deg);
 4         }
 5     </style>
 6 </head>
 7 <body>
 8 <img src="img/boke.png" alt="">
 9 <img class="img" src="img/boke.png" alt="">
10 </body>
复制代码

       效果图:

 
 
(2)blur(模糊)

blur(模糊效果,单位px)    

复制代码
1    <style>
 2         .img{
 3             -webkit-filter:blur(1px);
 4         }
 5     </style>
 7 <body>
 8 <img src="img/boke.png" alt="">
 9 <img class="img" src="img/boke.png" alt="">
10 </body>
复制代码

      示例图片:

 

     

(3)invert反色

    invert反色会吧图片变成底片的感觉,多说无益,看代码:

    

复制代码
<style>
        .img{
            -webkit-filter:invert(100%);
        }
    </style>
<body>
<img src="img/boke.png" alt="">
<img class="img" src="img/boke.png" alt="">
</body>
复制代码

    示例图片:

    

 

    好了,今天的分享就到这里了,谢谢大家的观看,其它的效果博主就不一一举例了,如果感兴趣请大家一一探索,也可以跟博主来交流,有什么好的意见建议请给博主留言,谢谢。

 

转自:https://www.cnblogs.com/zheshiyigemanong/p/6943205.html

仅供个人学习

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
要什么 Photoshop,会这些 CSS 就够了

标题党一时爽,一直标题党一直爽 还在上大学那会儿,我就喜欢玩 Photoshop。后来写网页的时候,由于自己太菜,好多花里胡哨的效果都得借助 Photoshop 实现,当时就特别希望 CSS 能像 Photos...

osc_0xf6ethk
2019/07/28
4
0
CSS3中强大的filter(滤镜)属性

filter(滤镜)属性,是CSS3中非常有意思的一个属性,可惜IE不支持(当然IE有它专属的滤镜方式)。无所谓,反正IE已经日薄西山。当然,强迫症的同学还是可以在网上找到与CSS3 filter对应的IE滤...

osc_v8ngb6p0
2019/11/18
6
0
IE滤镜实现透明度/阴影/渐变等特效

IE滤镜实现透明度/阴影/渐变等特效 CSS3是当下非常火的一个话题,很多浏览器都已经开始支持这一特性,然后IE这个拥有庞大用户群体的平台,却无法提供这样的支持,即便是IE9发布,也无法改变这...

wolf_su
2013/05/13
37
0
CSS3滤镜——原来这么性感诱人

CSS3滤镜包括了以下几种: /css3滤镜/ /图片灰度/ -webkit-filter:grayscale(1);/值为从0 - 1/ /褐色/ -webkit-filter:sepia(1);/值为从0 - 1/ /饱和度/ -webkit-filter:saturate(3);/值为从...

水表装在家里的小明
2015/05/18
2
0
CSS图文排版裁切及滤镜的使用

1.图文排版 字符间距(中英文文字间): letter-spacing; 单词间距:word-spacing; 英文换行:word-break; 中文换行:word-wrap; 强制不换行:whitespace:nowrap,但此时文本会超出容器的范围。 ...

eventually
2015/09/15
15
0

没有更多内容

加载失败,请刷新页面

加载更多

如何通过日期属性对数组进行排序 - How to sort an array by a date property

问题: Say I have an array of a few objects: 说我有一些对象的数组: var array = [{id: 1, date: Mar 12 2012 10:00:00 AM}, {id: 2, date: Mar 8 2012 08:00:00 AM}]; How can I sort......

javail
25分钟前
22
0
技术教程| 百度鹰眼历史轨迹查询:轨迹抽稀功能

本文作者:用****9 本篇教程中,我们将详细地说明鹰眼历史轨迹查询(gettrack接口)中,如何通过vacuate_grade选项对轨迹进行抽稀,以及不同的抽稀力度对轨迹产生的影响。 上一篇教程中,我们...

百度开发者中心
前天
17
0
整数的最大值和最小值 - Maximum and Minimum values for ints

问题: I am looking for minimum and maximum values for integers in python. 我在python中寻找整数的最小值和最大值。 For eg., in Java, we have Integer.MIN_VALUE and Integer.MAX_VA......

法国红酒甜
55分钟前
22
0
Quartz的Misfire处理规则 错过任务执行时间的处理机制

调度(scheduleJob)或恢复调度(resumeTrigger,resumeJob)后不同的misfire对应的处理规则 CronTrigger withMisfireHandlingInstructionDoNothing ——不触发立即执行 ——等待下次Cron触发频率...

独钓渔
今天
4
0
PHP解析/语法错误; 以及如何解决它们? - PHP parse/syntax errors; and how to solve them?

问题: Everyone runs into syntax errors. 每个人都遇到语法错误。 Even experienced programmers make typos. 即使是经验丰富的程序员也会打错字。 For newcomers, it's just part of the......

fyin1314
今天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部