filter属性是css不常用的一个属性,但是用好了可以给网页增色不少!ps: IE不支持此属性;

img {
  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
  filter: grayscale(100%);
}

  这段代码可以让图片编程黑白,grayscale: 灰度,灰度模式;

  

img {
-webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
filter: brightness(200%);
}

  这段代码可以让图片亮度变亮, 配合css的渐变transition属性可以实现滑过逐渐变亮的动画效果。brightness 是bright的名词形式;意为亮度!

img {
-webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
filter: contrast(200%);
}

  这段代码可以让图片对比度提高;contrast : 意为对比,反差

盒子的阴影效果可以用box-shadow实现 ;文字的阴影效果可以用text-shadow实现;那图片的呢?给图片增加如下属性可以使得图片出现阴影效果;

img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}

  常用的filter属性opacity可以改变图片的透明度

img {
-webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
filter: opacity(30%); /*百分号或者小数.3*/
}

  

css3属性之filter初探的更多相关文章

  1. CSS3的滤镜filter属性

    css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightnes ...

  2. 关于css3属性filter

    今天看百度百科,看到其中一页所有图片背景全都设置为了灰白色,于是研究了番,发现是应用了filter滤镜这个属性. // 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-fi ...

  3. css3属性兼容性

    来自:http://www.cnblogs.com/woleicom/p/4111030.html css3属性兼容性 /*圆角class,需要设置圆角的元素加上class名称*/ .roundedC ...

  4. css3属性 -webkit-filter

    css3属性 -webkit-filter -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错.下面咱们就学习一下filter这个属性吧. 现在规范中支 ...

  5. 如何处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  6. CSS3属性 box-shadow 向框添加一个或多个阴影

    CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...

  7. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  8. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  9. 实用的CSS3属性和使用技巧

    CSS可以改进网站的设计并且开拓网站设计更多的可能性,可以令你的网页更具吸引力.对于前端开发者.网站设计师来说,掌握并熟练应用CSS是一项必不可少的技能. 下面列出了一些非常实用的CSS3属性和使用技 ...

随机推荐

  1. nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)

    问题场景 服务器重启后,重启nginx时报错nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: N ...

  2. XSHELL的坑

    今天使用XSHELL连接虚拟机上的CENTOS7 ,刚开始还可以正常连接,后来再就连接不上. 检查了半天SSH服务都检查过了运行正常, 重启,检查配置文件. 都OK没问题就是连接不上,折腾半天还是不行 ...

  3. win server 2012下安装IIS 8后配置ASP网站的注意事项

    1,安装IIS时,如果你用不到asp.net 在web下的应用程序开发只需要勾选ASP这一项就可以. 2,IIS测试成功后,需要在你设定的主目录添加权限,找到你的主目录-属性-安全-编辑,添加Ever ...

  4. 20192204李龙威 2019-2020-2 《Python程序设计》实验一报告

    20192204 2019-2020-2 <Python程序设计>实验一报告 课程:<Python程序设计> 班级: 1922 姓名: 李龙威 学号:20192204 实验教师 ...

  5. LGP7840题解

    给出一种新的理解方式,本质上和正解是一致的. 首先我们现在已经有了一个森林,我们现在要给他加一条边,加哪一条边是最优的呢? 假设加的边是 \((u,v)\),那么 \(((d[u]+1)^2-d[u] ...

  6. LGP5142题解

    题意简明,不说了( 因为教练让同学们做线段树的题,早就会了线段树的我就来爆踩水水蓝了/kk 首先推一下柿子: \[\frac 1 n\sum_{i=1}^n(a_i^2-2 \times a_i \t ...

  7. 拉普拉斯特征映射(Laplacian Eigenmaps)

    1 介绍 拉普拉斯特征映射(Laplacian Eigenmaps)是一种不太常见的降维算法,它看问题的角度和常见的降维算法不太相同,是从局部的角度去构建数据之间的关系.也许这样讲有些抽象,具体来讲, ...

  8. k8s原来这么简单(一)核心组件与工作原理

     k8s官方文档:https://kubernetes.io/zh/docs/home/ 前提 掌握容器技术:Docker,Containerd等 K8S优势 使用简单,少量人/小团队可以轻松维护大型 ...

  9. asp.net MVC 事务

    使用事务的目的是什么? 保证事务范围内的代码,要么全部执行,要么全不执行,也就是出错回滚. 写在数据库脚本里很好理解,但是用在应用程序层面,没有看到catcha error rallback的代码,心 ...

  10. 【Jenkins】基于Windows系统安装Jenkins

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 一.Jenkins简介 Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建.测试和部署软件. Jenkins 支持各种 ...