CSS3 filter 滤镜拓展补充(URL)

当前位置: 首页 » 记录 » css » CSS3 filter 滤镜拓展补充(URL)

分类: css 875阅读阅读模式

CSS3 filter 中有一个比较有意思的是 URL ,google 了很多次,愣是没找到啥教程。 how use ?

文档中就都是这一句:
“ The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element.
(URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素.)”。

好吧,进入正题。

 

 

1、blur() 高斯模糊

SVG 用法为:

  1. <svg>
  2. <filter id="svgBlur">
  3. <feGaussianBlur in="SourceGraphic" stdDeviation="[amount]"/>
  4. </filter>
  5. <image xlink:href="link" filter="url(#svgBlur)" />
  6. </svg>

其中 stdDeviation 为模糊数值,单位为像素( px )。

貌似负数等同于 5px 的效果。

默认值为 0 ;

 

 

2、brightness() 亮度调节

SVG 用法为:

  1. <svg>
  2. <filter id="brightness">
  3. <feComponentTransfer>
  4. <feFuncR type="linear" slope="[amount]"/>
  5. <feFuncG type="linear" slope="[amount]"/>
  6. <feFuncB type="linear" slope="[amount]"/>
  7. </feComponentTransfer>
  8. </filter>
  9. <image xlink:href="link" filter="url(#brightness)" />
  10. </svg>

其中 slope 的属性值为 0-1-250 的值,可分别对其中一项进行修改,效果更佳。

貌似负数为 0 的效果,高于 250 没变化。

默认值为 1 ;

 

 

3、 contrast() 对比度

SVG 用法为:

  1. <svg>
  2. <filter id="contrast">
  3. <feComponentTransfer>
  4. <feFuncR type="linear" slope="[amount]" intercept="[amount]"/>
  5. <feFuncG type="linear" slope="[amount]" intercept="[amount]"/>
  6. <feFuncB type="linear" slope="[amount]" intercept="[amount]"/>
  7. </feComponentTransfer>
  8. </filter>
  9. </svg>

其中 slope 的属性值为 0-1-250 的值,可分别对其中一项进行修改,效果更佳。

默认值为 1 ;

其中 intercept 的属性值为明暗的变化。-1 为完全黑。1为完全白。

默认值为 0 ;

 

 

4、drop-shadow() 阴影效果

SVG 用法一:

  1. <svg>
  2. <filter id="drop-shadow">
  3. <feOffset dx="[offset-x]" dy="[offset-y]" in="SourceAlpha"/>
  4. <feGaussianBlur stdDeviation="[radius]"/>
  5. </filter>
  6. <img id="Img1" src="link">
  7. <use xlink:href="#Img1" filter="url(#drop-shadow)"/>
  8. <use xlink:href="#Img1"/>
  9. </svg>

dx 为 x 轴偏移,dy 为 y 轴偏移。

默认值为 0 ;

stdDeviation 为阴影半径。

默认值为 0 ;

 

SVG 用法二:

  1. <svg>
  2. <filter id="drop-shadow2">
  3. <feOffset dx="[offset-x]" dy="[offset-y]" in="SourceAlpha"/>
  4. <feGaussianBlur stdDeviation="[radius]"/>
  5. <feComponentTransfer>
  6. <feFuncA type="table" tableValues="0 [radius] [radius]"/>
  7. </feComponentTransfer>
  8. </filter>
  9. <img id="Img2" src="link">
  10. <use xlink:href="#Img2" filter="url(#drop-shadow2)"/>
  11. <use xlink:href="#Img2"/>
  12. </svg>

dx 为 x 轴偏移,dy 为 y 轴偏移。

默认值为 0 ;

stdDeviation 为阴影半径。

默认值为 0 ;

tableValues 三个参数为 0 内半径 外半径(0 是干啥的?);

默认值为 0 0 0;

 

SVG 用法三(更新):

  1. <svg>
  2. <filter id="drop-shadow3">
  3. <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
  4. <feOffset dx="16" dy="16"/>
  5. <feMerge>
  6. <feMergeNode/>
  7. <feMergeNode in="SourceGraphic"/>
  8. </feMerge>
  9. </filter>
  10. <image xlink:href="#Img3" filter="url(#drop-shadow3)"/>
  11. </svg>

dx 为 x 轴偏移,dy 为 y 轴偏移。

默认值为 0 ;

stdDeviation 为阴影半径。

默认值为 0 ;

 

 

5、grayscale() 灰度

SVG 用法为:

  1. <svg>
  2. <filter id="grayscale">
  3. <feColorMatrix type="matrix"
  4. values="0.2126 0.7152 0.0722 0 0
  5. 0.2126 0.7152 0.0722 0 0
  6. 0.2126 0.7152 0.0722 0 0
  7. 0 0 0 1 0"/>
  8. </filter>
  9. <image xlink:href="link" filter="url(#grayscale)" />
  10. </svg>

value 矩阵参数中为从上往下的灰度 RGB 默认数值 ,后面 0 0 接受最大值为相加等于 1 。

默认值

  • 0.2126 0.7152 0.0722 0 0
  • 0.2126 0.7152 0.0722 0 0
  • 0.2126 0.7152 0.0722 0 0
  • 0 0 0 1 0 ;

 

 

6、hue-rotate() 色相旋转

  1. <svg>
  2. <filter id="hue-rotate">
  3. <feColorMatrix type="hueRotate" values="[angle]"/>
  4. </filter>
  5. <image xlink:href="link" filter="url(#hue-rotate)" />
  6. </svg>

values 为旋转的角度数值(不带单位)。

默认值为 0 ;

 

 

7、invert() 色相反转

  1. <svg>
  2. <filter id="invert">
  3. <feComponentTransfer>
  4. <feFuncR type="table" tableValues="1 0"/>
  5. <feFuncG type="table" tableValues="1 0"/>
  6. <feFuncB type="table" tableValues="1 0"/>
  7. </feComponentTransfer>
  8. </filter>
  9. <image xlink:href="link" filter="url(#invert)"/>
  10. </svg>

tableValues 从上往下为 R G B 值,[1 0] 为色相反转,[0 1] 为正常;

默认值为:1 0 ;

 

 

8、opacity() 透明度

  1. <svg>
  2. <filter id="opacity">
  3. <feComponentTransfer>
  4. <feFuncA type="table" tableValues="0 1">
  5. </feComponentTransfer>
  6. </filter>
  7. <image xlink:href="link" filter="url(#opacity)" />
  8. </svg>

tableValues 值为 [ 背景明暗 透明度 ] 。背景明暗:0 为背景完全透明、1为背景完全黑。透明度:0 为完全透明、1为完全不透明。

默认值为 0 1 。

 

 

9、 saturate() 饱和度

  1. <svg>
  2. <filter id="saturate">
  3. <feColorMatrix type="saturate" values="1"/>
  4. </filter>
  5. <image xlink:href="link" filter="url(#saturate)"/>
  6. </svg>

values 值低于 1 为色调不饱和,高于 1 为添加饱和色调。

默认值为 1 。

 

 

10、 sepia() 复古度(自编)

  1. <svg>
  2. <filter id="sepia">
  3. <feColorMatrix type="matrix"
  4. values="0.393 0.769 0.189 0 0
  5. 0.349 0.686 0.168 0 0
  6. 0.272 0.534 0.131 0 0
  7. 0 0 0 1 0"/>
  8. </filter>
  9. <image xlink:href="link" filter="url(#sepia)"/>
  10. </svg>

value 矩阵参数中为从上往下的灰度 RGB 默认数值 ,后面 0 0 接受最大值为相加等于 1 ,跟灰度类似。

默认值:

  • 0.393 0.769 0.189 0 0
  • 0.349 0.686 0.168 0 0
  • 0.272 0.534 0.131 0 0
  • 0 0 0 1 0 ;

 

 

用法示例:

内用:

直接在 svg 中引入 img ,图片自动会被滤镜属性渲染。

  1. <svg>
  2. <filter id="someid">
  3. ...
  4. ...
  5. ...
  6. </filter>
  7. <image xlink:href="somepic.jpg" filter="url(#someid)"/>
  8. </svg>

 

外用:

预先配置好 svg 滤镜属性 。

  1. <svg>
  2. <filter id="someid">
  3. ...
  4. ...
  5. ...
  6. </filter>
  7. </svg>

在样式中引入该 svg。

  1. .someimg { filter: url(#someid); }

 

 

TIP: 复合函数没有 svg 写法,例如 filter: contrast(100) brightness(300%) 用 svg 写法实现不了。

 

完毕!

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

 

 

 

相关文章

评论一下

【注意1】:首次评论使用表情将会进入审核状态。
【注意2】:无意义回复、乱打文字内容将会进入审核状态。
【注意3】:涉及辱骂、色情、政治、毒品、赌博内容将会进入审核状态。
【注意】:首次评论使用表情将会进入审核状态。
暂无评论