CSS改变图片颜色的filter(滤镜)属性

2019-09-12 admin

前端一般处理图片,我首先想到的就是ps。 但是,前端css的filter属性一样可以得到一些意想不到的效果(例如:图片模糊与图片饱和度) 今天我们就来挨个介绍一下这些取值产生的效果 也可以参考runoob

filter(滤镜)

filter的取值有:none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

none(默认值,没有效果)

img{
  filter: none;
}

none的效果图: none

blur() (给图像设置高斯模糊)

img{
  filter: blur(2px);
}

blur(0px-20px)与原图的对比效果: blur(0px-20px)与原图的对比效果

brightness() (给图片应用一种线性乘法,使其看起来更亮或更暗)

brightness(0%):全黑 brightness(100%):没有变化 brightness(>100%):图片变得更亮

img{
  filter: brightness(50%);
}

brightness(100%~0%)与原图的对比效果: brightness(100%~0%)与原图的对比效果

contrast() (调整图像的对比度)

contrast(0%):全灰 contrast(100%):没有变化 contrast(>100%):图片对比度更明显

img{
  filter: contrast(50%);
}

contrast(100%~0%)与原图的对比效果: contrast(100%~0%)与原图的对比效果

drop-shadow() (给图像设置一个阴影效果)

这个取值类似于box-shadow drop-shadow(h-shadow v-shadow blur spread color) 1、<h-shadow> <v-shadow> (必须) 这是设置阴影偏移量的两个 <length>值. <h-shadow> 设定水平方向距离. 负值会使阴影出现在元素左边. <v-shadow>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位. 如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur> and/or <spread>,会有模糊效果). 2、<blur> (可选) .值越大,越模糊,则阴影会变得更大更淡.不允许负值 若未设定,默认是0 (则阴影的边界很锐利). 3、<spread> (可选) 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器 不支持第四个长度,如果加了也不会渲染。 4、<color> (可选) 查看 <color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用colorcolor属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。

img{
  filter: drop-shadow(2px 4px 6px #000);
}

drop-shadow(2px 4px 6px #000)的效果图: drop-shadow(2px 4px 6px #000)的效果图

grayscale() (将图像转换为灰度图像)

grayscale(0%):无变化 grayscale(100%):灰度图片 grayscale(>100%):跟100%的效果一致

img{
  filter: grayscale(50%);
}

grayscale(0%~100%)与原图的对比效果: grayscale(0%~100%)与原图的对比效果

hue-rotate() (给图像应用色相旋转)

hue-rotate(0deg):无变化 hue-rotate(180deg):变化 hue-rotate(360deg):无变化 hue-rotate(361deg)的效果等同于hue-rotate(1deg)的效果 0~360deg为一个周期

img{
  filter: hue-rotate(50deg);
}

hue-rotate(0deg~360deg)与原图的对比效果: hue-rotate(0deg~360deg)与原图的对比效果

invert() (反转输入图像)

invert(0%):无变化 invert(100%):完全反转 invert(>100%):跟100%的效果一致

img{
  filter: invert(50%);
}

invert(0%~100%)与原图的对比效果: invert(0%~100%)与原图的对比效果

opacity() (转化图像的透明程度)

opacity(0%):完全透明 opacity(100%):无变化 opacity(>100%):跟100%的效果一致 该值类似与opacity属性

img{
  filter: opacity(50%);
}

opacity(100%~0%)与原图的对比效果: opacity(100%~0%)与原图的对比效果

saturate() (转换图像饱和度)

saturate(0%):完全不饱和 saturate(100%):无变化 saturate(>100%):更高的饱和度

img{
  filter: saturate(50%);
}

saturate(0%~200%)与原图的对比效果: saturate(0%~200%)与原图的对比效果

sepia() (将图像转换为深褐色)

img{
  filter: sepia(0%);
}

sepia(0%~100%)与原图的对比效果: sepia(0%~100%)与原图的对比效果

url() (URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。)

SVG滤镜资源是指以xml文件格式定义的svg滤镜效果集,可以通过URL引入并且通过锚点(#element-id)指定具体的一个滤镜元素 用法:filter: url(svg-url#element-id)

svg-xml文件

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events"
     baseProfile="full">
    <defs>
        <!-- 此处定义滤镜 -->
        <filter id="blur">
            <feGaussianBlur stdDeviation="4" result="blur"/>  
            <!-- feGaussianBlur(滤镜): 该滤镜对输入图像进行高斯模糊 -->
            <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
            <!-- feOffset(模糊):创建阴影效果 -->
        </filter>
    </defs>
</svg>
img{
  filter: url("./svg.xml#blur");
}

效果图入下: url.jpg

[转载]原文链接:https://segmentfault.com/a/1190000020373112

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74995.html

文章标题:CSS改变图片颜色的filter(滤镜)属性

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
JS中的语音合成——Speech Synthesis API
JS中的语音合成——Speech Synthesis API 简介 HTML5中和Web Speech相关的API实际上有两类,一类是“语音识别(Speech Recognition)”,另外一个就是“语音合成(Speech Synthes...
2018-05-17
回到顶部