上面的图片就是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. 家谱（gen）——洛谷P2814

    #include <iostream> #include <string> #include <map> using namespace std; map < ...

  2. 洛谷 P1068 分数线划定【排序+模拟】

    世博会志愿者的选拔工作正在 A 市如火如荼的进行.为了选拔最合适的人才,AA市对 所有报名的选手进行了笔试,笔试分数达到面试分数线的选手方可进入面试.面试分数线根 据计划录取人数的150\%150%划 ...

  3. ASP.NET Core多平台部署 (Windows Server+IIS与CentOS 7+Nginx)

    一,Windows Server+IIS部署 1,安装配置IIS,这个应该都不用多说了,教程一堆 2,下载安装.NET Core Runtime 与 .NET Core SDK,下载请点击下载地址,如 ...

  4. Linux 常用密令总结 ------随用随记吧

    ubuntu or uqilin 目录文件类ls 查看目录cd 转到目录ps -aux查看所有进程grep 查找| 管道符 用户账户类 su 切换用户sudo 以管理员权限运行命令重启机器 reboo ...

  5. C++ - 部分STL容器如何去除重复元素

    如果元素被保存在vector中,可先对vector里面的元素排序,然后调用unique函数去重,unique(起始迭代器,终止迭代器),返回的是去重以后vector中没有重复元素的下一个位置的迭代器. ...

  6. [bzoj4562][Haoi2016]食物链_记忆化搜索_动态规划

    食物链 bzoj-4562 Haoi-2016 题目大意:给你n个点,m条边的DAG,求所有的满足条件的链,使得每条链的起点是一个入度为0的点,中点是一条出度为0的点. 注释:$1\le n\le 1 ...

  7. nutch的定时增量爬取

    译文来着: http://wiki.apache.org/nutch/Crawl 介绍(Introduction) 注意:脚本中没有直接使用Nutch的爬去命令(bin/nutch crawl或者是& ...

  8. STM32学习之路-LCD（4）&lt;显示字符&gt;

    昨晚疯狂的打了一夜的LOL,感觉L多了,今天一天精神萎靡.还是继续把显示字符给看了,可是在犹豫要不要写这篇文章 事实上写的东西也就是copy别人家的代码,不想写那么多,就记录下自己困惑的地方吧.也许改 ...

  9. 输入url发生了什么--前端所有知识

    面试经常会问到的一个问题,这个问题舒展开来,其实包含了前端(一些后端)几乎所有的知识.梳理一下,备忘.包含了一些面经中常问的问题. 有时间待续

  10. luogu1082 同余方程

    题目大意:求$$ax\equiv 1(\ \mathrm{mod}\ m)$$的最小正整数解. 因为$ax-1|m$,故令$ax-1=-ym$,原方程就变成了$ax+my=1$.根据bezout定理此 ...