Maison >interface Web >tutoriel HTML >CSS3实战开发:使用CSS3实现photoshop的过滤效果_html/css_WEB-ITnose
CSS3实战开发:使用CSS3实现photoshop的过滤效果_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:59:291386parcourir
我们知道，使用Photoshop来调整图像的亮度和对比度，或者将图片转化为灰度等等是很常见的功能。今天我将给大家介绍几个新特性，我们使用CSS来给web图像添加相同的效果。
首先我们先在网页中显示一张图片,html代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="stylesheet" href="styles.css" media="screen"><title>CSS3实战开发:使用CSS3实现photoshop的过滤效果</title></head><body><img src="20140821.jpg" style="max-width:90%" / alt="CSS3实战开发:使用CSS3实现photoshop的过滤效果_html/css_WEB-ITnose" ></body></html>
此时运行效果图如下：
下面我给大家介绍相应特性，同时给各位演示应用图片过滤样式之后的效果图。
一、调整图像灰阶度：grayscale，范围为0%-100%。应用样式代码如下：
img { -webkit-filter: grayscale(100%); }
此时页面效果为：
二、给图片应用深褐色效果：sepia，范围0-100%语法代码如下：
img { -webkit-filter: sepia(100%); }
此时运行页面效果：
三、调整图片曝光度：brightness，范围0%-100%，语法代码如下:
img { -webkit-filter: brightness(40%); }
运行页面，效果如下：
四、调整图像对比度：contrast，语法代码如下：
img { -webkit-filter: contrast(500%); }
页面效果如下：
最后给大家介绍一个模糊特效：blur，语法代码如下：
img { -webkit-filter: blur(2px); }
此时页面效果如下：
当然，上面的这些特性是可以同时使用的，比如，当鼠标划过图片时，将图片变成灰色的，且模糊图片，则代码如下：
img:hover { -webkit-filter:grayscale(100%) blur(2px); }
此时页面效果为：
原来用CSS特性完成Photoshop的过滤功能是如此简单。
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：关于position布局的问题_html/css_WEB-ITnoseArticle suivant：同样的样式，同百分比控制img的高度，在安卓下可以，为什么在ios下就不行呢？_html/css_WEB-ITnose