一篇文章带你了解CSS3 滤镜(Filters)之一

开发 前端
CSS3滤镜效果提供了一种将视觉效果应用于图像的简便方法。

 [[376349]]

CSS3滤镜效果提供了一种将视觉效果应用于图像的简便方法。

一、模糊效果

像高斯模糊效果这样的Photoshop可以使用该blur()功能应用于元素。此函数接受CSS长度值作为定义模糊半径的参数。较大的值将产生更多的模糊。如果未提供参数,则使用值0。

例:

  1. img.blur { 
  2.    -webkit-filter: blur(2px); /* Chrome, Safari, Opera */ 
  3.    filter: blur(2px); 
  4. img.extra-blur { 
  5.    -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ 
  6.    filter: blur(5px); 
  7. /* Some CSS to beautify this example */ 
  8. table td{ 
  9.    padding: 10px; 
  10.    text-align: center; 

运行结果:

二、设置图像亮度

brightness()功能可用于设置图像的亮度。值为0%将创建全黑的图像。而值100%或1使图像不变。其他值是效果的线性乘数。

还可以将亮度设置为高于100%,这样可以使图像更亮。如果缺少数量参数,则使用值1。不允许使用负值。

例:

  1. <style> 
  2. img { 
  3. width: 200px; 
  4. height: 100px; 
  5.  
  6. img.blur { 
  7. -webkit-filter: blur(2px); 
  8. /* Chrome, Safari, Opera */ 
  9. filter: blur(2px); 
  10.  
  11. img.extra-blur { 
  12. -webkit-filter: blur(5px); 
  13. /* Chrome, Safari, Opera */ 
  14. filter: blur(5px); 
  15.  
  16. /* Some CSS to beautify this example */ 
  17. table td { 
  18. padding: 10px; 
  19. text-align: center; 
  20. </style> 

运行结果:

注意:75%接受以百分号表示的值(例如)的过滤器函数也接受以十进制表示的值(如0.75)。如果该值无效,该函数将返回none并且将不应用任何滤镜效果。

三、调整图像对比度

contrast()功能用于调整图像的对比度。的值0%将创建全黑的图像。而值100%或1保持图像不变。还允许超过100%的值,从而提供对比度较低的结果。如果数量参数缺失或省略,1则使用值。

例:

  1. <style> 
  2. img { 
  3. width: 200px; 
  4. height: 100px; 
  5.  
  6. img.bright { 
  7. -webkit-filter: contrast(200%); 
  8. /* Chrome, Safari, Opera */ 
  9. filter: contrast(200%); 
  10.  
  11. img.dim { 
  12. -webkit-filter: contrast(50%); 
  13. /* Chrome, Safari, Opera */ 
  14. filter: contrast(50%); 
  15.  
  16. /* Some CSS to beautify this example */ 
  17. table td { 
  18. padding: 10px; 
  19. text-align: center; 
  20. </style> 

运行结果:

四、向图像添加阴影

可以使用该drop-shadow()功能将阴影效果应用于Photoshop等图像。

此功能类似于该box-shadow属性。

例:

  1. <style> 
  2. img { 
  3. width: 200px; 
  4. height: 100px; 
  5.  
  6. img.shadow { 
  7. -webkit-filter: drop-shadow(2px 2px 4px orange); 
  8. /* Chrome, Safari, Opera */ 
  9. filter: drop-shadow(2px 2px 4px orange); 
  10.  
  11. img.shadow-large { 
  12. -webkit-filter: drop-shadow(4px 4px 10px orange); 
  13. /* Chrome, Safari, Opera */ 
  14. filter: drop-shadow(4px 4px 10px orange); 
  15.  
  16. /* Some CSS to beautify this example */ 
  17. table td { 
  18. padding: 10px; 
  19. text-align: center; 
  20. </style> 

运行结果:

注意:drop-shadow()函数的第一个和第二个参数分别指定阴影的水平和垂直偏移,而第三个参数指定模糊半径,最后一个参数指定阴影颜色,就像该box-shadow属性一样,但有一个例外,' inset'不允许使用关键字。

总结

本文基于CSS基础,通过案例,详细的讲解了CSS3滤镜效果的模糊效果、设置图像高度、调整图像对比度、向图像添加阴影等知识。这几个方面通过运行后效果图的展示,让读者更直观,更简单易动。

代码很简单,希望文章的内容能够帮助更好的学习。

本文转载自微信公众号「前端进阶学习交流」,可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。

 

责任编辑:武晓燕 来源: 前端进阶学习交流
相关推荐

2021-01-20 05:31:29

CSS3Filters图像

2021-04-07 06:11:37

Css前端CSS定位知识

2021-01-25 05:39:54

Css前端Border

2021-05-31 09:30:36

Css前端CSS 特效

2020-11-03 19:18:28

CSS对齐文本

2021-06-30 00:20:12

Hangfire.NET平台

2023-05-12 08:19:12

Netty程序框架

2020-11-17 11:10:21

CSS选择器HTML

2021-05-20 09:02:59

CSS单位长度

2023-08-01 14:34:12

HTMLCSS

2023-06-28 15:04:59

CSSHTML

2022-03-04 09:31:41

CSS前端属性选择器

2022-02-15 09:31:43

透明度CSS

2021-01-29 18:41:16

JavaScript函数语法

2020-11-10 10:48:10

JavaScript属性对象

2021-02-02 18:39:05

JavaScript

2021-06-04 09:56:01

JavaScript 前端switch

2024-01-30 13:47:45

2023-09-06 14:57:46

JavaScript编程语言

2021-01-26 23:46:32

JavaScript数据结构前端
点赞
收藏

51CTO技术栈公众号