关于css样式filter的信息

css的 style="filter:alpha(opacity="50")"。其中的filter是什么意思。谁能为我解释一下这个样式中的意思

你这个滤镜是IE专用的,建设不要用,如果想做透明可以用JS来解决

创新互联专业为企业提供临猗网站建设、临猗做网站、临猗网站设计、临猗网站制作等企业网站建设、网页设计与制作、临猗企业网站模板建站服务,十年临猗做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

你要的与此无关菜单代码

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title导航菜单/title

style type="text/css"

* {

margin:0;

padding:0;

}

#nav {

width:680px;

height:38px;

background-color:#00CC99;

font-size:12px;

margin:0 auto;

margin-top:100px;

}

#clear {

clear:both;

}

ul {

list-style:none;

}

#nav li {

float:left;

}

#nav li:hover dl {

display:block;

}

#nav li a {

background-color: #000;

color: #FFF;

padding:12px 20px;

display:block;

text-decoration:none;

}

#nav li a:hover {

background-color: #f60;

}

#nav li dl {

display:none;

}

#nav li dl dd a {

background-color:#666;

color: #FFF;

}

#nav li dl dd a:hover {

background-color: #fc9;

color:#f00;

}

#nav li:hover dl {

display:block;

}

/style

/head

body

div id="nav"

ul

lia href="#"首页/a/li

lia href="#"公司介绍/a

dl

dda href="#"公司成员/a/dd

dda href="#"技术支持/a/dd

dda href="#"公司历史/a/dd

dda href="#"证书获得/a/dd

dda href="#"服务宗旨/a/dd

/dl

/li

lia href="#"技术支持/a

dl

dda href="#"专业技术/a/dd

dda href="#"技术指导/a/dd

dda href="#"技术证书/a/dd

dda href="#"学历证明/a/dd

/dl

/li

lia href="#"品牌推广/a

dl

dda href="#"自主品牌/a/dd

dda href="#"热销产品/a/dd

dda href="#"最新试销/a/dd

dda href="#"产品分类/a/dd

dda href="#"产品说明/a/dd

dda href="#"作用功效/a/dd

dda href="#"市场份额/a/dd

/dl

/li

lia href="#"商品展示/a

dl

dda href="#"热卖展区/a/dd

dda href="#"各地展台/a/dd

dda href="#"功能介绍/a/dd

dda href="#"推荐产品/a/dd

dda href="#"其他功能/a/dd

/dl

/li

lia href="#"成功案例/a

dl

dda href="#"广西案例/a/dd

dda href="#"上海案例/a/dd

dda href="#"成都案例/a/dd

dda href="#"新疆案例/a/dd

dda href="#"北京案例/a/dd

/dl

/li

lia href="#"客户服务/a/li

lia href="#"联系我们/a/li

/ul

div id="clear"/div

/div

/body

/html

CSS样式中怎么写filter:alpha(opacity=55)透明样式?

指定标签的透明样式,使用class类或者id定位即可,如下这个案例:

#demo1,.demo2{filter:alpha(opacity=55);}

这是ID命名的demo

CSS里的filter属性是CSS哪个版本里的?

CSS里的filter属性是CSS2.0版本的。

filter:filtername(parameters)即 filter:滤镜名(参数)

其中,filter是滤镜选择符;filtername是滤镜的属性名,这里包括alpha、blur、chroma等

多种属性;parameters是属性参数值。属性名及参数值请看下面的《filter属性及属性值》。

具体的应用有两种方法:

1、先定义好CSS ,再在页面中需要的对象上使用预先定义好的CSS,实际上CSS的设置对话框里已经预先将这些滤镜的语法设置好了,我们只需填上适合的具体参数即可。

2、直接在支持CSS滤镜效果的HTML控件元素上编写CSS filter代码。

可视化滤镜属性应用的HTML合法的控件和它们的说明

元 素 说 明

BODY 网页文档的主体元素,所有的可见范围都在元素内

BUTTON 表单域的按钮,可以有“发送(submit)”、“重置(reset)”等形式

DIV 定义了网页上的一个区域,这个区域的高度、宽度或者绝对位置都是以知的

IMG 图片元素,通过指定“src"属性来指定图片的来源

INPUT 输入表单域

MARQUEE 移动字幕效果

SPAN 定义了网页上的一个区域,这个区域的高度、宽度或者绝对位置都是以知的

TABLE 表格

TD 表格数据单元格

TEXTAREA 文本区域

TFOOT 多行输入文本框

TH 表格标题单元格

THEAD 表格标题

TR 表格行

编写CSS filter代码基本语法:

filter属性及属性值

滤镜名 说 明 滤镜名 说 明

Alpha 设置透明度 Blur 设置模糊效果

Chroma 设置指定颜色透明 Dropshadow 设置投射阴影

Fliph 水平翻转 Flipv 垂直翻转

Glow 对象的外边界增加光效 Grayscale 设置灰度(降低图片的色彩度)

Invert 设置底片效果 Light 设置灯光投影

Mask 设置透明膜 Shadow 设置阴影效果

Wave 利用正弦波纹打乱图片 Xray 只显示轮廓

1、Alpha:设置透明层次

语法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"

说明:

Opacity:起始值,取值为0~100, 0为透明,100为原图。

FinishOpacity:目标值。

Style:1或2或3

StartX:任意值

StartY:任意值

例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")

2、blur:创建高速度移动效果,即模糊效果

语法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"

说明:

Add:一般为1,或0。

Direction:角度,0~315度,步长为45度。

Strength:效果增长的数值,一般5即可。

例子:filter:Blur(Add="1",Direction="45",Strength="5")

3、Chroma:制作专用颜色透明

语法:STYLE="filter:Chroma(Color = color)"

说明:color:#rrggbb格式,任意。

例子:filter:Chroma(Color="#FFFFFF

4、DropShadow:创建对象的固定影子

语法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"

说明:Color:#rrggbb格式,任意。

Offx:X轴偏离值。

Offy:Y轴偏离值。

Positive:1或0。

例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5、FlipH:创建水平镜像图片

 语法:STYLE="filter:FlipH"

例子:filter:FlipH

6、FlipV:创建垂直镜像图片

语法:STYLE="filter:FlipV"

例子:filter:FlipV

7、glow:加光辉在附近对象的边外

语法:STYLE="filter:Glow(Color=color, Strength=strength)"

说明:

Color:发光颜色。

Strength:强度(0-100)

例子:filter:Glow(Color="#6699CC",Strength="5")

8、gray:把图片灰度化

语法:STYLE="filter:Gray"

例子:filter:Gray

9、invert:反色

语法:STYLE="filter:Invert"

例子:filter:Invert

10、Light:设置灯光投影

语法:Filter{light}

这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT"滤镜属性,那么就可以调用它的“方法(Method)

"来设置或者改变属性。“LIGHT"可用的方法有:

AddAmbient 加入包围的光源

AddCone 加入锥形光源

AddPoint 加入点光源

Changcolor 改变光的颜色

Changstrength 改变光源的强度

Clear 清除所有的光源

MoveLight 移动光源

可以定义光源的虚拟位置,以及通过调整X轴和Y轴的数值来控制光源焦点的位置,还可以调整光源的形式

(点光源或者锥形光源)指定光源是否模糊边界、光源的颜色、亮度等属性。如果动态的设置光源,可能回

产生一些意想不到的效果。后面几页会有具体范例。

11、mask:创建透明掩膜在对象上

语法:STYLE="filter:Mask(Color=color)"

例子:filter:Mask (Color="#FFFFE0")

12、shadow:创建偏移固定影子

语法:filter:Shadow(Color=color, Direction=direction)

说明:

Color:#rrggbb格式。

Direction:角度,0-315度,步长为45度。

例子:filter:Shadow (Color="#6699CC", Direction="135")

13、wave:波纹效果

语法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)

说明:

Add:一般为1,或0。

Freq:变形值。

LightStrength:变形百分比。

Phase:角度变形百分比。

Strength:变形强度。

例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

14、Xray:使对象变得像被x光照射一样

语法:STYLE="filter:Xray"

例子:filter:Xray

15.颜色变化

语法:filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B5CCFA', EndColorStr='#B5CCFA');

在CSS样式表中为什么filter属性不能用?

filter类似的滤镜火狐是不支持的,

只有IE支持他。

想实现类似的功能,需要使用其他手段~~


分享标题:关于css样式filter的信息
当前地址:http://hbruida.cn/article/dsccgdh.html