在上篇博客中，小编主要简单的介绍了使用CSS，如何制作实用菜单，今天我们继续来总结有关CSS的基础知识，今天小编主要简单的来介绍一下CSS中关于滤镜的使用，首先，小编先来简单的介绍一下滤镜，我们这次来说说滤镜的使用，首先，小编来简单的介绍一下滤镜的概念，CSS滤镜并不是浏览器的插件，也不符合CSS标准，二而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的又累功能的集合。由于浏览器IE有着很广的使用范围，因此CSS滤镜也被广大设计者所喜爱。CSS滤镜的标识是“filter”，总体上跟其他CSS语句一样，都十分简单，紧接着，我们来看一张思维导图：

接着，小编就随着上述思维导图的脉络，依次简单介绍，首先我们来看看Alpha通道，我们来看例子代码和运行效果：

  Alpha通道

  1. <span style="font-size:18px;"><span style="font-size:18px;"><html>
  2. <head>
  3. <title>alpha滤镜</title>
  4. <style>
  5. <!--
  6. body{
  7. 	background:url(bg1.jpg);
  8. 	margin:20px;
  9. }
  10. img{
  11. 	border:1px solid #d58000;
  12. }
  13. .alpha{
  14. 	filter:alpha(opacity=50);
  15. }
  16. -->
  17. </style>
  18.    </head>
  19. <body>
  20. <img src="building1.jpg" border="0">  
  21. <img src="building1.jpg" border="0" class="alpha">
  22. </body>
  23. </html></span></span>

运行效果如下所示：

分析一下上面的代码，第二幅图片相对于第一副图片来说，具有的夜晚效果更加强烈，我们看CSS代码：这里我们把filter:alpha(opacity=20)；当然大家可以自己来设置不同的值，来看显示效果。我们接着看blur模糊，我们不用photoshop也能制造出模糊的效果。我们来看例子代码和运行效果：

    Blur模糊

  1. <span style="font-size:18px;"><span style="font-size:18px;"><html>
  2. <head>
  3. <title>Blur滤镜</title>
  4. <style>
  5. <!--
  6. body{
  7. 	margin:10px;
  8. }
  9. .blur{
  10. 	filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);
  11. }
  12. -->
  13. </style>
  14.    </head>
  15. <body>
  16. <img src="building9.jpg"> 
  17. <img src="building9.jpg" class="blur">
  18. </body>
  19. </html></span></span>

运行效果如下所示：



       我们来分析一下上面的例子，对比两幅图，第二幅用了class=“blur”，我们看到这句话filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false)；这里我们将模糊的效果

pixelradius设置为不同的值，则可以看到不同的模糊效果，小伙伴们可以自己动手来试一下。我们接下来看透明色滤镜，我们来看例子代码和运行效果：

      透明色

  1. <span style="font-size:18px;"><span style="font-size:18px;"><html>
  2. <head>
  3. <title>chroma滤镜</title>
  4. <style>
  5. <!--
  6. body{
  7. 	margin:10px;
  8. }
  9. .chroma{
  10. 	filter:chroma(color=FF6800);		/* 去掉金黄色 */
  11. }
  12. -->
  13. </style>
  14.    </head>
  15. <body>
  16.  <img src="tiger.gif">  
  17. <img src="tiger.gif" class="chroma">
  18. </body>
  19. </html></span></span>

运行效果如下：



       分析一下上面的例子，我们很清楚的看到，老虎身上的金黄色进行了过滤，我们看这句话：filter:chroma(color=FF6800);就是把金黄色去掉。我们继续看flip翻转滤镜。CSS可以在不处理图片的环境下，对图片进行翻转，看下面的例子代码和运行效果：

Flip翻转

  1. <span style="font-size:18px;"><span style="font-size:18px;"><html>
  2. <head>
  3. <title>Flip翻转</title>
  4. <style>
  5. <!--
  6. body{
  7. 	margin:12px;
  8. 	background:#000000;
  9. }
  10. .flip1{
  11. 	filter:fliph;	/* 水平翻转 */
  12. }
  13. .flip2{
  14. 	filter:flipv;	/* 竖直翻转 */
  15. }
  16. .flip3{
  17. 	filter:flipv fliph;	/* 水平、竖直同时翻转 */
  18. }
  19. -->
  20. </style>
  21.    </head>
  22. <body>
  23. <img src="building4.jpg"><img src="building4.jpg" class="flip1"><br>
  24. <img src="building4.jpg" class="flip2"><img src="building4.jpg" class="flip3">
  25. </body>
  26. </html></span></span>

运行效果如下：



       分析一下上面的例子，这里其实是四幅图片，第一幅（左上角），原片；第二幅进行了水平的映像，第三幅进行了竖直方向的镜像；而右下角同时进行了水平和竖直方向的映像。我们看一下代码：我们从代码中也看的出来，flip1进行了水平翻转，我们继续看遮罩，photoshop里边有强大的遮罩功能，我们来看例子代码和运行效果：

  遮罩

  1. <span style="font-size:18px;"><html>
  2. <head>
  3. <title>Mask遮罩</title>
  4. <style>
  5. <!--
  6. body{
  7. 	margin:12px;
  8. 	background:#000000;
  9. }
  10. .mask{
  11. 	filter:mask(color=#FF0000);	/* 遮罩效果 */
  12. }
  13. -->
  14. </style>
  15.    </head>
  16. <body>
  17. 	<img src="muma.gif"> 
  18. 	<img src="muma.gif" class="mask">
  19. </body>
  20. </html></span>

运行效果如下所示：



        分析一下上面的例子，我们看到第二第二幅图，有点像影子变幻的效果，我们看一下CSS代码，我们的代码中，第一幅图片没有做处理，第二幅图片进行了mask处理。我们看这句话：filter:mask(color=RED);这里是显示需要遮罩的颜色。我们继续看最好一个滤镜，波浪滤镜，我们经常采用photoshop来实现波浪效果，css也可以，我们看一下例子代码和运行效果：

  1. <span style="font-size:18px;"><html>
  2. <head>
  3. <title>Wave波浪滤镜</title>
  4. <style>
  5. <!--
  6. body{
  7. 	margin:12px;
  8. 	background-color:#e4f1ff;
  9. }
  10. span{
  11. 	font-family:Arial, Helvetica, sans-serif;
  12. 	height:100px; font-size:80px;
  13. 	font-weight:bold;
  14. 	color:#50a6ff;
  15. }
  16. span.wave1{
  17. 	filter:wave(add=0,freq=2,lightstrength=70,phase=75,strength=4);
  18. }
  19. span.wave2{
  20. 	filter:wave(add=0,freq=4,lightstrength=20,phase=25,strength=5);
  21. }
  22. span.wave3{
  23. 	filter:wave(add=1,freq=4,lightstrength=60,phase=0,strength=6);
  24. }
  25. -->
  26. </style>
  27.    </head>
  28. <body>
  29. 	<span class="wave1">波浪Wave</span>
  30. 	<span class="wave2">波浪Wave</span>
  31. 	<span class="wave3">波浪Wave</span>
  32. </body>
  33. </html></span>

运行效果如下：



       分析一下上面的例子，这里的三段文字，每一个都采用了一个波浪的效果：

(add=0,freq=2,lightstrength=70,phase=75,strength=4)，表示的频率是2，最后的程度是4，最后我们来看一个综合的例子，三个滤镜搭配使用，会有什么样的神奇效果，例子代码和运行效果如下所示：

  1. <span style="font-size:18px;"><html>
  2. <head>
  3. <title>三个滤镜同时使用</title>
  4. <style>
  5. <!--
  6. body{
  7. 	margin:12px;
  8. 	background:#000000;
  9. }
  10. .three{
  11. 	filter:flipv alpha(opacity=80) wave(add=0, freq=15, lightstrength=30, phase=0, strength=4);
  12. 	/* 同时使用三个滤镜 */
  13. 	/* 竖直翻转、透明、波浪效果 */
  14. }
  15. -->
  16. </style>
  17.    </head>
  18. <body>
  19. 	<img src="lotus.jpg"><br>
  20. 	<img src="lotus.jpg" class="three">
  21. </body>
  22. </html></span>

运行效果如下：

      

小编寄语：这篇博文，小编主要简单的介绍了CSS中关于滤镜的相关 知识点，分别介绍了Alpha通道，Blur模糊，透明色等等，最后一个小例子，三个滤镜同时使用，各位小伙伴如果想把效果做的更美更绚一点，小编还是推荐使用photoshop，毕竟这些小例子在各个浏览器里面的显示效果有差别，BS学习，未完待续......

精通CSS+DIV网页样式与布局--滤镜的使用的更多相关文章

  1. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  2. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  3. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  4. 精通CSS+DIV网页样式与布局--页面和浏览器元素

    在页面和浏览器中,除了文字.图片.表格.表单等,还有很多各种各样的元素,在上篇博文中,小编主要简单的介绍了一下在CSS中如何设置表格和表单,今天小编主要简单介绍一下丰富的超链接特效.鼠标特效.页面滚动 ...

  5. 精通CSS+DIV网页样式与布局--页面背景

    上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...

  6. 精通CSS+DIV网页样式与布局--制作实用菜单

    在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...

  7. 精通CSS+DIV网页样式与布局--设置表单和表格

    表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预 ...

  8. 精通CSS+DIV网页样式与布局--CSS段落效果

    在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...

  9. 精通CSS+DIV网页样式与布局--CSS文字效果

    上篇文章,小编简单的介绍了一下CSS的一些基本语法,学习内容不是很复杂,都是CSS的一些入门知识,但是万丈高楼平地起,搭好地基,高楼大厦不在话下,学习任何课程,都必须从基础开始,一步一个脚印,踏实坚定 ...

随机推荐

  1. jvm（三）：对象

    关于对象,我们需要面对的问题主要有对象的创建,对象在内存中的布局,对象的结构,对象的访问定位. 对象的创建 对象的创建过程如下图所示: 其主要步骤有:给对象分配内存,初始化对象,执行构造方法. 在对象 ...

  2. NVisionXR for ARCore内测版开放申请

    NVisionXR for ARCore引擎能够帮助开发者快速开发原生ARCore应用,只要你懂基本的Android开发,直接使用Android Studio,即可实现动画模型渲染.粒子特效.音视频播 ...

  3. chrome不支持embed标签解决方案

    <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv=&quo ...

  4. Red Hat Enterprise Linux7的安装与oracle 12c的安装

    Red Hat Enterprise Linux7的安装与oracle 12c的安装 本文档中用到的所有参数均位于文末附录 Red Hat Enterprise Linux7的安装 新建完虚拟机后,挂 ...

  5. [HCNA]VLAN配置Access接口

    实验目的 1.理解VLAN的应用场景 2.掌握VLAN的基本配置 3.掌握Access接口的配置方法 4.掌握Access接口加入相应VLAN的方法 实验仪器 eNSP 实验原理 如网络拓扑图所示 各 ...

  6. vue移动端组件库vux使用小记

    1.首先安装vux:npm install  vux 2.安装vux-loader:npm install  vux-loader 3.确认是否已安装less-loader:npm  install ...

  7. List Set Map比较

    List按对象进入的顺序保存对象,不做排序或编辑操作. Set对每个对象只接受一次,并使用自己内部的排序方法(通常,你只关心某个元素是否属于Set,而不关心它的顺序–否则应该使用List). Map同 ...

  8. opencv 3.1.0 访问像素值的三种方法（C++）

    三种方法分别问: 指针访问:void colorReduce_ptr(cv::Mat &inputImage, cv::Mat &outputImage, int div); 迭代器访 ...

  9. 110个oracle常用函数总结

    . ASCII 返回与指定的字符对应的十进制数; SQL) zero,ascii( ) space from dual; A A ZERO SPACE --------- --------- ---- ...

  10. Rails在MacOS上搭建Heroku部署环境

    heroku只是用postgresql,而不能兼容sqlite数据库.所以很重要的一步就是在部署实际产品的时候将数据库类型修改为postgresql,否则你将无法push到heroku上去. hero ...