上面的图片就是css3新特性的滤镜效果，学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~

好，咱们先把照片后面的白框实现，

　　　　<style>　

　　　　　　　　#div1{

　　　　　　　　　　/*给div定义宽高和颜色*/

　　　　　　　　　　width: 200px;
　　　　　　　　　　height: 250px;
　　　　　　　　　　background: white;

　　　　　　　　　/* 内填充距离照片为15px ，文字居中*/
　　　　　　　　　　padding: 15px;

　　　　　　　　　　text-align: center;

　　　　　　/*　　把白色背景旋转-10deg  */

　　　　　　　　　　-webkit-transform: rotate(-10deg);

　　　　　　/*给背景一个阴影的效果*/
　　　　　　　　　　box-shadow: 4px 4px 4px #666;
　　　　　　　　　　float: left;
　　　　　　　　　　}

　　　　</style>　　　　　　　
　　　　　　<body>
　　　　　　　　　<div id="div1">

			<img src="img/001V28Mwty6Fww02IiNad&690.jpg">

			<p>灰色滤镜</p>

		</div>
　　　　　　</body>

　　

把白色的背景框写好之后，接下来就该到滤镜了

首先来第一张，艺术的黑白色

　　　　　　　　#div1 img{

　　　　　　　　/*把div1里面的图片百分百，等同于相对于在div1里面百分比放大填充*/

　　　　　　　　　　width: %;
　　　　　　　/*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/
　　　　　　　　　　-webkit-filter: grayscale(); 　　　　　　　　　　}

第二张照片，额...老照片.

#div1 img{

            width: %;

            -webkit-filter: sepia();

        }

第三张照片，反色？我也不太清楚啥颜色

#div1 img{

            width: %;

            -webkit-filter: hue-rotate(200deg);

        }

第四张照片，仿佛罩了一层白雾

#div1 img{

            width: %;

            -webkit-filter: opacity(0.5);

        }

还有一张照片的效果图上没有，是模糊效果代码如下

#div4 img{

            width: %;

            -webkit-filter: opacity(0.5);

        }

好了，我的滤镜分享完毕，接下来美图去了

css3的过滤效果的更多相关文章

  1. css3图片过滤效果

    在线演示 本地下载

  2. css3图片模糊过滤效果

    css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...

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

    原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...

  4. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  5. Image Wall - jQuery & CSS3 图片墙效果

    今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将 ...

  6. css3的transition效果和transfor效果

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. css3幻灯片换位效果

    <title>css3幻灯片换位效果</title> <style type="text/css">  .flowGallery {width: ...

  8. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  9. html+css3实现长方体效果

    网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 h ...

随机推荐

  1. 07springMVC视图解析器

    u  概述 u  常见视图解析器 u  UrlBasedViewResolver u  InternalResourceViewResolver u  视图解析器链 u  说明 1      概述 在 ...

  2. 关于Bubblesort算法

    Java中的经典算法之冒泡排序(Bubble Sort) 原理:比较两个相邻的元素,将值大的元素交换至右端. 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2 ...

  3. Android Studio 导入的项目编码错误问题

    错误提示: Error:(4, 35) 閿欒: 缂栫爜UTF-8鐨勪笉鍙槧灏勫瓧绗? 解决方法: 1). 2). 的下面添加下面的一行语句: android{compileOptions.enco ...

  4. pl/sql developer 布局结构保存

    pl/sql developer 布局结构保存 调整了工具栏,调整了窗体框位置,点击 窗口->保存版面 就可以保留当前的调整的结果,不用一次一次调整了: 也可以在工具 -> 首选项 -&g ...

  5. linux下select,poll,epoll的使用与重点分析

    好久没用I/O复用了,感觉差点儿相同都快忘完了.记得当初刚学I/O复用的时候花了好多时间.可是因为那会不太爱写博客,导致花非常多时间搞明确的东西,依旧非常easy忘记.俗话说眼过千遍不如手过一遍,的确 ...

  6. POJ 2762 Going from u to v or from v to u?(强联通，拓扑排序)

    id=2762">http://poj.org/problem?id=2762 Going from u to v or from v to u? Time Limit: 2000MS ...

  7. Unable to read the project file &#39;client.csproj&#39;. Could not load file or assembly &#39;Microsoft.Build.En

    错误具体信息: Unable to read the project file 'client.csproj'. Could not load file or assembly 'Microsoft. ...

  8. solaris x86安装ORACLE 11.2.0.3软件时因SWAP不足报错： INFO: ld: fatal: mmap anon failed

    1.ORACLE软件安装到86%时报错,图忘截了.日志例如以下: /oracle/u01/app/oracle/product/11.2.0/ INFO: db_1/lib/sysliblist` - ...

  9. map-reduce入门

    map-reduce入门 近期在改写mahout源代码,感觉自己map-reduce功力不够深厚,因此打算系统学习一下. map-reduce事实上是一种编程范式,从统计词频(wordCount)程序 ...

  10. UVA 10888 - Warehouse(二分图完美匹配)

    UVA 10888 - Warehouse option=com_onlinejudge&Itemid=8&page=show_problem&category=562& ...