使用CSS过滤效果来改变图片样式

淩亂°似流年 2022-08-07 04:58 328阅读 0赞

1. </pre>   我们知道，使用Photoshop来调整图像的亮度和对比度，或者将图片转化为灰度等等是很常见的功能。今天我将给大家介绍几个新特性，我们使用<a target=\_blank target="\_blank" href="http://www.itdriver.cn/" style="color: rgb(16, 138, 198);">CSS</a>来给web图像添加相同的效果。首先我们先在网页中显示一张图片,html代码如下：<pre code\_snippet\_id="456178" snippet\_file\_name="blog\_20140822\_2\_4956469" name="code" class="html"><!DOCTYPE html> 
 
2. <html> 
 
3. <head> 
 
4. <meta charset="utf-8"> 
 
5. <link rel="stylesheet" href="styles.css" media="screen"> 
 
6. <title>[CSS3][]实战开发:使用CSS过滤效果来改变图片样式</title> 
 
7. </head> 
 
8. <body> 
 
9.  
 
10. <img src="20140821.jpg"  width="800" /> 
 
11. </body> 
 
12. </html>

复制代码

此时运行效果图如下：

![210114339879235.png][]

下面我给大家介绍相应特性，同时给各位演示应用图片过滤样式之后的效果图。  
一、调整图像灰阶度：grayscale，范围为0%-100%。应用样式代码如下：

1.  img \{    
    
2.       -webkit-filter: grayscale(100%);    
    
3.  \}

复制代码

此时页面效果为：

![210123260493318.png][]

二、给图片应用深褐色效果：sepia，范围0-100%语法代码如下：

1.  img \{    
    
2.       -webkit-filter: sepia(100%);    
    
3.  \}

复制代码

此时运行页面效果：

![210127346591902.png][]

三、调整图片曝光度：brightness，范围0%-100%，语法代码如下：

1.  img \{    
    
2.      -webkit-filter: brightness(40%);     
    
3.  \}

复制代码

运行页面，效果如下：

![210130014718155.png][]

四、调整图像对比度：contrast，语法代码如下：

1.  img \{    
    
2.      -webkit-filter: contrast(500%);     
    
3.  \}

复制代码

页面效果如下：

![210134142683186.png][]

最后给大家介绍一个模糊特效：blur，语法代码如下：

1.  img \{    
    
2.      -webkit-filter: blur(2px);     
    
3.  \}

复制代码

此时页面效果如下：

![210136589561565.png][]

当然，上面的这些特性是可以同时使用的，比如，当鼠标划过图片时，将图片变成灰色的，且模糊图片，则代码如下：

1.  img:hover \{    
    
2.      -webkit-filter:grayscale(100%) blur(2px);     
    
3.  \}

复制代码

此时页面效果为：

![210140042219431.png][]

原来用CSS特性完成Photoshop的功能是如此简单。

[CSS3]: http://www.html5cn.org/portal.php?mod=list&catid=16
[210114339879235.png]: http://bbs.html5cn.org/data/attachment/forum/201408/22/1516181tgrnsosxt2preyy.png
[210123260493318.png]: http://bbs.html5cn.org/data/attachment/forum/201408/22/151707k3d1ji10ppss3bd3.png
[210127346591902.png]: http://bbs.html5cn.org/data/attachment/forum/201408/22/151801tm6pnv133ntm1gsl.png
[210130014718155.png]: http://bbs.html5cn.org/data/attachment/forum/201408/22/151834xrcuwl3ox77hybtz.png
[210134142683186.png]: http://bbs.html5cn.org/data/attachment/forum/201408/22/151925h6rssaaazosvvxxo.png
[210136589561565.png]: http://bbs.html5cn.org/data/attachment/forum/201408/22/1520041ycxa00szty10xjf.png
[210140042219431.png]: http://bbs.html5cn.org/data/attachment/forum/201408/22/152043m4lan84szba1ctj1.png