上面的图片就是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. 谨慎调整内核参数:vm.min_free_kbytes

    内核参数:内存相关 内存管理从三个层次管理内存,分别是node, zone ,page; 64位的x86物理机内存从高地址到低地址分为: Normal DMA32 DMA.随着地址降低. [root@ ...

  2. LA 3363

    Run Length Encoding(RLE) is a simple form of compression. RLE consists of the process for searching ...

  3. 04-Linux系统编程-第01天（文件IO、阻塞非阻塞）

    03-系统函数 系统编程章节大纲 1 文件I/O 2 文件系统 3 进程 4 进程间通信 5 信号 6 进程间关系 7 守护进程 8 线程 9 线程同步 10 网络基础 11 socket编程 12 ...

  4. vue 项目部署到nginx

    第一步在控制台终端输入npm run build 打包完成之后项目中会生成一个dist文件夹,直接访问里面的index.html就ok了 第二步配置nginx 第三步重启nginx service n ...

  5. 快速上手Linux 玩转典型应用_慕课网笔记

    1.没有exe安装程序 2.区分大小写 3.一切皆文件 4.文件后缀不是那么重要,只是为了好识别 -------------------------------------------------- ...

  6. 洛谷 P2813 母舰

    题目描述 在小A的星际大战游戏中,一艘强力的母舰往往决定了一场战争的胜负.一艘母舰的攻击力是普通的MA(Mobile Armor)无法比较的. 对于一艘母舰而言,它是由若干个攻击系统和若干个防御系统组 ...

  7. HDU 4517

    EASY题,直接统计(1,1)到(i,j)的黑点个数,然后计算出以(i,j)点为右下角的矩形内的黑点个数是x*y即可. 注意当x==y时不要重复统计. #include <iostream> ...

  8. [Javascript] Understand common misconceptions about ES6's const keyword

    Values assigned with let and const are seen everywhere in JavaScript. It's become common to hear the ...

  9. 公布IOS产品被拒后怎样再上传新公布包

    问题描写叙述: 前两天提交公司产品2.0.7版本号到苹果审核,昨天提示被拒绝. 被拒原因就不描写叙述了. 我们经过改动后.又一次打包上传,但是怎么也提交不了.由于在苹果后台上已经存在2.0.7版本号的 ...

  10. Oracle-11-主键约束

    一.Oracle系统一共提供了下面5种约束 1.非空(NOT NULL)约束:所定义的列绝不能为空: 2.唯一(UNIQUE)约束:在表中每一行中所定义的列,其列值不能同样: 3.主键(PARIMAR ...