文档章节

CSS技巧收集——巧用滤镜

woshixia
 woshixia
发布于 2016/07/18 10:48
字数 396
阅读 10
收藏 1

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style>
    .box {
      width: 500px;
      height: 200px;
      margin: 100px auto;
      /*该滤镜会将图片的色相值收敛到35-40,产生一种老旧照片的感觉。且 sepia 接受的参数只能为 1 或者 100%,其他数值均不会产生任何效果。*/
      -webkit-filter:sepia(1);

       /*该滤镜会降低图片的色值使其变为灰色,它与 sepia 接受的参数一致,只有 1 和 100% 有效。*/
      -webkit-filter:grayscale(1);

      /*该滤镜用于设置图片的饱和度,它接收一个非负数值作为参数,为 0 时图片为纯黑白效果。*/
      -webkit-filter:saturate(3);

      /*该滤镜用于指定图片色相值的具体偏移量,它接收一个角度值作为参数,可正可负。*/
      -webkit-filter:hue-rotate(60deg);

      /*该滤镜会产生反色效果,参数也只接收 1 或 100%。*/
      -webkit-filter:invert(1);

      /*该滤镜就是用到的模糊效果,其接收一个非负的像素值作为参数。*/
      -webkit-filter:blur(3px);

      /*该滤镜会产生透明效果,参数为 0-1 之间的小数或百分比。*/
      -webkit-filter:opacity(.5);

      /*该滤镜用于提升图片亮度,当参数小于等于 0 时,为全黑*/
      -webkit-filter:brightness(3);

      /*该滤镜用于提升对比度,当参数小于等于 0 时,为全灰。*/
      -webkit-filter:contrast(3);

      /*css 的滤镜主要是上面这些,需要提示的是滤镜不是同时只能用一种,你可以通过组合来达到自己想要的效果*/
      -webkit-filter:sepia(1) saturate(4) hue-rotate(300deg);
    }
    </style>
    <body>
    <div class="box">
      <img src="images/5.jpg" alt="">
    </div>
    </body>
</html>

本文转载自:http://www.cnblogs.com/ghost-xyx/p/5677608.html

woshixia
粉丝 2
博文 18
码字总数 7246
作品 0
昌平
程序员
私信 提问
巧用CSS的alpha滤镜

作者:冯永曜 “Alpha”滤镜,听到这个名字,你可能会想到Flash里有,Photoshop里也似乎见过。一点不错,它们的作用基本类似,就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度...

晨曦之光
2012/03/09
148
0
巧用CSS的Glow滤镜

作者:冯永曜 对一个对象使用“glow”滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在PHTOSHOP中做起来都比较麻烦,而在DW3中用CSS的“glow”滤镜来制作却是如此地简单,而且节约...

晨曦之光
2012/03/09
261
0
巧用CSS的RevealTrans滤镜

作者: 冯永曜 CSS的RevealTrans动态滤镜是一个神奇的滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种。用它来进行网页之间的动态切换,简直方便极了,你...

晨曦之光
2012/03/09
198
0
巧用CSS的 Mask 滤镜

作者:冯永曜 在网页制作中使用CSS,这已是众所周知,而关于CSS滤镜使用的却介绍得不多。其实,0CSS的滤镜在Dreamweaver3中用起来也很方便,且能使文字产生一种类似图象的效果,但比起图片来...

晨曦之光
2012/03/09
163
0
巧用CSS的Wave滤镜

作者:冯永曜 "wave"滤镜,看它的名称你可能就能想到其效果,正如你想的那样,它的作用是把对象按照垂直的波形样式扭曲,从而产生一种特殊的效果。它共有5个参数: "add":表示是否要把对象按...

晨曦之光
2012/03/09
73
0

没有更多内容

加载失败,请刷新页面

加载更多

oracle查杀连接会话

由于频繁强制启停tomcat不清理连接等情况时可能导致oracle连接爆满,此时可以使用这个方式清理 --查询select sess.sid,sess.serial#,sess.machine,lo.oracle_username,lo.os_user_name,...

孑竹三秋
13分钟前
5
0
为什么互联网公司天天都在招人?

互联网公司招聘是很重要的环节,互联网公司离职率普遍较高,传统企业离职率较低,所以对于公司招聘是很重要的环节,同样一句“很重要”我看到许多人理解其程度实际上大相径庭。在很多互联网公...

码农突围
14分钟前
4
0
001-open-falcon的单机版安装

open-falcon 每台服务器,都有安装falcon-agent,falcon-agent是一个golang开发的daemon程序,用于自发现的采集单机的各种数据和指标 单机安装 redis mkdir /home/redis && cd /home/redis...

伟大源于勇敢的开始
15分钟前
3
0
人工智能领跑的未来,智能CRM未来可期

现在,几乎每个技术预测故事都以同样的方式开始:人工智能AI正在开辟新的可能性。这种趋势同样发生在CRM领域中。 人工智能正在通过访问和分析来改变CRM。它正在通过添加语音助手、同时改善工...

怡海软件-CRM
17分钟前
3
0
mysql-5.7.28-linux-glibc2.12-x86_64配置(参考)

[client]socket                                            = /data/mysql/var/mysql.sockport                                         ...

Wybaron
20分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部