CSS滤镜:概述

css|滤镜

好了,下面我们将进入CSS的最精彩的部分--滤镜,它将把我们带入绚丽多姿的多媒体世界。正是有了滤镜属性,页面才变得更加漂亮。
  CSS的滤镜属性的标识符是filter。为了使您对它有个整体的印象,我们先来看一下它的书写格式:
   filter:filtername(parameters)

  怎么样?是不是很简单,看上去与前面讲的属性定义没什么太大的差别。Filter是滤镜属性选择符。
  也就是说,只要您进行滤镜操作,就必须先定义filter;filtername是滤镜属性名,这里包括alpha、blur、chroma等等多种属性,详细内容请看下表:

  上面filter表达式中括号内的parameters是表示各个滤镜属性的参数,也正是这些参数决定了滤镜将以怎样的效果显示。
  看了上面长长的列表,是不是觉得很困难呀?不要紧,我们接下来一个一个的介绍这些属性在CSS中是怎样实现的(很简单哟^_^)。
  下一节我们将首先学习Alpha透明属性的应用。

时间: 2024-08-19 18:06:08

CSS滤镜:概述的相关文章

实例详解CSS滤镜(1)概述

css|滤镜|详解 CSS的滤镜属性的标识符是filter.为了使您对它有个整体的印象,我们先来看一下它的书写格式: filter:filtername(parameters) 怎么样?是不是很简单,看上去与前面讲的属性定义没什么太大的差别.Filter是滤镜属性选择符. 也就是说,只要您进行滤镜操作,就必须先定义filter:filtername是滤镜属性名,这里包括alpha.blur.chroma等等多种属性,详细内容请看下表:   上面filter表达式中括号内的parameters是表

精彩实例详解CSS滤镜教程

css|教程|滤镜|详解 使您由浅入深了解CSS滤镜的使用,是一个不错的教程!希望对您学习CSS有用! 1.实例详解CSS滤镜(1)概述 (2005-05-04) 2.实例详解CSS滤镜(2)Mask属性 (2005-05-04) 3.实例详解CSS滤镜(3)Blur属性 (2005-05-04) 4.实例详解CSS滤镜(4)Chroma属性 (2005-05-04) 5.实例详解CSS滤镜(5)DropShadow属性 (2005-05-04) 6.实例详解CSS滤镜(6)Glow属性 (20

CSS滤镜:Invert属性

css|滤镜 Invert属性可以把对象的可视化属性全部翻转,包括色彩.饱和度和亮度值. 它的表达式也很简单: Filter:Invert 我们再来看一下加上Invert属性前后的图片效果变化(如下图): 原图 Invert属性效果图 我们看到Invert属性实际上达到的是一种"底片"的效果.

CSS滤镜:FlipH、FlipV属性

css|滤镜 Flip是CSS滤镜的翻转属性,FlipH代表水平翻转,FlipV代表垂直翻转.它们的表达式很简单,分别是: Filter:FlipH Filter:FlipV 我们先来看一幅图:点击可放大   下面我们分别对它实现水平翻转和垂直翻转,并且在图片上方的一段文字,也发生翻转.代码如下: <html> <head> <title>flip css</title> <style>//*设置CSS样式开始*// <!-- div{po

用CSS滤镜实现图片翻转特效

css|滤镜|特效 图片水平翻转 代码: 1.内部插入式 在〈head〉与〈/head〉之间插入: style type = text/css〉 .TurnH{filter:FlipH} /style〉 然后在图片属性代码中加class="TurnH". 注意:在〈head〉与〈/head〉之间插入代码中,TurnH前有一个"."(不包括引号),请一定不要漏掉了. 2.直接插入式 在图片属性代码中加入: style=" filter: FlipH"

用CSS滤镜巧制3D按钮式导航条

css|按钮|导航|滤镜 平面的导航条看多了,想不想做个3D的,当然制作的方法很多,真是仁者见仁,智者见智.我试着做了个按钮式的,效果还不错,每一个菜单项看起来都是一个个的按钮,制作方法也不复杂,并且大小只有几k,算瘦小的了.你只要有点html和CSS的基础知识就够了. 下面我们开始制作: 第一步: 用Dreamweaver建立一个3x1的表格,宽度为70px,不设高度值,边框设为0,间距(cellspacing)为2. 第二步: 在上面已经建立好的表格的单元格中分别插入一个1x1的表格,高度值

妙用CSS滤镜为图片加上特殊效果

css|滤镜 有时候,我们需要给网页中的图片加一些特殊的效果,比如透明.扭曲.阴影或者翻转等,我们一般都会想到用Photoshop等一些图形软件来处理,其实我们也可以利用CSS(层叠式样表)提供的一些滤镜来处理,这对于不熟悉Photoshop的网友来说,是非常好的一件事.       我们先从较简单的开始,介绍几个没有参数的滤镜.      1.Gray滤镜        Gray滤镜的作用是产生黑白效果        使用方法:<img src="http://www.webjx.com

实例详解CSS滤镜(5)DropShadow属性

ado|css|滤镜|详解 DropShadow属性是为了添加对象的阴影效果的.它实现的效果看上去就像使原来的对象离开页面,然后在页面上显示出该对象的投影.看一看它的表达式: Filter:DropShadow(Color=color,Offx=Offx,Offy=offy, Positive=positive) 该属性一共有四个参数: Color代表投射阴影的颜色. Offx和offy分别X方向和Y方向阴影的偏移量.偏移量必须用整数值来设置.如果设置为正整数,代表X轴的右方向和Y轴的向下方向.

实例详解CSS滤镜(4)Chroma属性

css|滤镜|详解 Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下: Filter:Chroma(color=color) 这个属性的表达式是不是很简单,它只有一个参数.只需把您想要指定透明的颜色用Color参数设置出来就可以了.比如下面这幅图: 图中显示两种字体,两种颜色,我们现在对"leaves"字体添加chroma属性,使其透明.代码如下: <html> <head> <title>chroma filter</ti