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

2019-09-12

前端一般处理图片,我首先想到的就是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%)与原图的对比效果](https://img.javascriptcn.com/fe6b38395972b0226ebce36f06d8982a"brightness(100%~0%)与原图的对比效果")

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

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

img{
  filter: contrast(50%);
}

contrast(100%0%)与原图的对比效果: ![contrast(100%0%)与原图的对比效果](https://img.javascriptcn.com/17a6d08215046909c94c39ee53f0057d"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%)与原图的对比效果](https://img.javascriptcn.com/f6fc29227f126474412f20d303e4eaa9"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(0deg360deg)与原图的对比效果: ![hue-rotate(0deg360deg)与原图的对比效果](https://img.javascriptcn.com/f407c872d5546414006f1ae9048f7501"hue-rotate(0deg~360deg)与原图的对比效果")

invert() (反转输入图像)

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

img{
  filter: invert(50%);
}

invert(0%100%)与原图的对比效果: ![invert(0%100%)与原图的对比效果](https://img.javascriptcn.com/dc5ffc2fd4743fda5dd6cc0a3189b6b3"invert(0%~100%)与原图的对比效果")

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

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

img{
  filter: opacity(50%);
}

opacity(100%0%)与原图的对比效果: ![opacity(100%0%)与原图的对比效果](https://img.javascriptcn.com/6a31f4d506a94b4e898309aea3657fde"opacity(100%~0%)与原图的对比效果")

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

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

img{
  filter: saturate(50%);
}

saturate(0%200%)与原图的对比效果: ![saturate(0%200%)与原图的对比效果](https://img.javascriptcn.com/9a03a5e9014afcea3f331f2d45cb0a4b"saturate(0%~200%)与原图的对比效果")

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

img{
  filter: sepia(0%);
}

sepia(0%100%)与原图的对比效果: ![sepia(0%100%)与原图的对比效果](https://img.javascriptcn.com/70b17fd8e3f31eed7918a7dd55900487"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

原文链接:segmentfault.com

上一篇:野子科技 当AI数据服务走进中场战事
下一篇:动态规划练习题-最优二分查找树
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部