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

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

首先我们先在网页中显示一张图片,html代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <link rel="stylesheet" href="styles.css" media="screen">
  6. <title>CSS3实战开发:使用CSS3实现photoshop的过滤效果</title>
  7. </head>
  8. <body>
  9.  
  10. <img src="20140821.jpg"  width="800" />
  11. </body>
  12. </html>

此时运行效果图如下：

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

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

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

此时页面效果为：

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

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

此时运行页面效果：

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

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

运行页面，效果如下：

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

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

页面效果如下：

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

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

此时页面效果如下：

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

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

此时页面效果为：

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

CSS3实战开发:使用CSS3实现photoshop的过滤效果的更多相关文章

  1. CSS3实战开发 表单发光特效实战开发

    首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"& ...

  2. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  3. CSS3实战开发: 折角效果实战开发

    <!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name ...

  4. CSS3实战手册(第3版)(影印版)

    <CSS3实战手册(第3版)(影印版)> 基本信息 原书名:CSS3: The Missing Manual, 3E 作者: David Sawyer McFarland 出版社:东南大学 ...

  5. 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.

    笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...

  6. HTML5+CSS3前端开发资源整合

    HTML5+CSS3前端开发资源整合   推个广告 个人网站:http://www.51pansou.com HTML5视频下载:HTML5视频 HTML5源码下载:HTML5源码 meta相关: & ...

  7. web 开发：CSS3 常用属性——速查手册！

    web 开发:CSS3 常用属性——速查手册! CSS3 简介:http://www.runoob.com/css3/css3-intro.html 1.目录 http://caniuse.com/ ...

  8. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

  9. 160427、CSS3实战笔记--多列布局

    通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5   多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...

随机推荐

  1. Codeforces 442B Andrey and Problem(贪婪)

    题目链接:Codeforces 442B Andrey and Problem 题目大意:Andrey有一个问题,想要朋友们为自己出一道题,如今他有n个朋友.每一个朋友想出题目的概率为pi,可是他能够 ...

  2. HDU 4309 Seikimatsu Occult Tonneru 网络流量+像缩进

    主题链接:点击打开链接 意甲冠军: 题意:给出一张N(N<=100)个点,M(M<=1000条)边的有向图. 每一个点上都有一些人.每条边有4个属性(u,v,w,p). 这些边分为三种:( ...

  3. Android Studio简单设置（转）

    Android Studio 简单设置 界面设置 默认的 Android Studio 为灰色界面,可以选择使用炫酷的黑色界面.Settings --> Appearance --> Th ...

  4. OpenWRT GPIO人口控制 WLED

    Linux根据系统GPIO系统架构简介 关于这个GPIO我一直认为非常非常长的时间easy.但.当你需要给一个特定的系统,参与这些GPIO什么时候.你会找到.不对,实例,mt7620n. GPIO#7 ...

  5. BZOJ 2878([Noi2012]-失落的游乐园树DP+出站年轮加+后市展望DP+vector的erase)

    2878: [Noi2012]迷失乐园 Time Limit: 10 Sec  Memory Limit: 512 MBSec  Special Judge Submit: 319  Solved:  ...

  6. 以太网PHY 芯片之 MII/MDIO接口详解

    本文主要分析MII/RMII/SMII,以及GMII/RGMII/SGMII接口的信号定义,及相关知识,同时本文也对RJ-45接口进行了总结,分析了在10/100模式下和1000M模式下的设计方法. ...

  7. 怎样在多线程中使用JNI？

    假设你想了解JNI在怎样在多线程下使用 假设你在子线程使用JNI时遇到findClass不能找到目标Class,而在主线程下却能找到该Class的问题.或是GetEnv返回NULL的问题 假设你想多学 ...

  8. ABP应用层——审计日志

    ABP应用层——审计日志 点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之19.ABP应用层——审计日志 ABP是“ASP.NET Boilerplate Pro ...

  9. .net安装包自动安装Mysql数据库

    原文:.net安装包自动安装Mysql数据库 在制作.Net安装包的时候,如果项目有用到数据库,怎么能够把数据库打包安装呢?网上已经有很多自动安装Sql Server数据库的例子,但是自动安装mysq ...

  10. Nyoj 吝啬的国度(图论&&双DFS)

    描述在一个吝啬的国度里有N个城市,这N个城市间只有N-1条路把这个N个城市连接起来.现在,Tom在第S号城市,他有张该国地图,他想知道如果自己要去参观第T号城市,必须经过的前一个城市是几号城市(假设你 ...