CSS3实战开发:使用CSS3实现photoshop的过滤效果

时间 2019-11-21

标签 css3 css 实战开发使用实现 photoshop 过滤效果栏目 CSS 繁體版

原文原文链接

咱们知道，使用Photoshop来调整图像的亮度和对比度，或者将图片转化为灰度等等是很常见的功能。今天我将给你们介绍几个新特性，咱们使用CSS来给web图像添加相同的效果。css

首先咱们先在网页中显示一张图片,html代码以下：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"  width="800" />
</body>
</html>

此时运行效果图以下：web

下面我给你们介绍相应特性，同时给各位演示应用图片过滤样式以后的效果图。spa

1、调整图像灰阶度：grayscale，范围为0%-100%。应用样式代码以下：3d

img {  
     -webkit-filter: grayscale(100%);  
}

此时页面效果为：code

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

img {  
     -webkit-filter: sepia(100%);  
}

此时运行页面效果：blog

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

img {  
    -webkit-filter: brightness(40%);   
}

运行页面，效果以下：utf-8

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

img {  
    -webkit-filter: contrast(500%);   
}

页面效果以下：

最后给你们介绍一个模糊特效：blur，语法代码以下：

img {  
    -webkit-filter: blur(2px);   
}

此时页面效果以下：

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

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

此时页面效果为：

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