你這個濾鏡是IE專用的,建設(shè)不要用,如果想做透明可以用JS來解決
創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供臨猗網(wǎng)站建設(shè)、臨猗做網(wǎng)站、臨猗網(wǎng)站設(shè)計、臨猗網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、臨猗企業(yè)網(wǎng)站模板建站服務(wù),十年臨猗做網(wǎng)站經(jīng)驗,不只是建網(wǎng)站,更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。
你要的與此無關(guān)菜單代碼
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title導(dǎo)航菜單/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="#"技術(shù)支持/a/dd
dda href="#"公司歷史/a/dd
dda href="#"證書獲得/a/dd
dda href="#"服務(wù)宗旨/a/dd
/dl
/li
lia href="#"技術(shù)支持/a
dl
dda href="#"專業(yè)技術(shù)/a/dd
dda href="#"技術(shù)指導(dǎo)/a/dd
dda href="#"技術(shù)證書/a/dd
dda href="#"學(xué)歷證明/a/dd
/dl
/li
lia href="#"品牌推廣/a
dl
dda href="#"自主品牌/a/dd
dda href="#"熱銷產(chǎn)品/a/dd
dda href="#"最新試銷/a/dd
dda href="#"產(chǎn)品分類/a/dd
dda href="#"產(chǎn)品說明/a/dd
dda href="#"作用功效/a/dd
dda href="#"市場份額/a/dd
/dl
/li
lia href="#"商品展示/a
dl
dda href="#"熱賣展區(qū)/a/dd
dda href="#"各地展臺/a/dd
dda href="#"功能介紹/a/dd
dda href="#"推薦產(chǎn)品/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="#"客戶服務(wù)/a/li
lia href="#"聯(lián)系我們/a/li
/ul
div id="clear"/div
/div
/body
/html
指定標(biāo)簽的透明樣式,使用class類或者id定位即可,如下這個案例:
#demo1,.demo2{filter:alpha(opacity=55);}
這是ID命名的demo
CSS里的filter屬性是CSS2.0版本的。
filter:filtername(parameters)即 filter:濾鏡名(參數(shù))
其中,filter是濾鏡選擇符;filtername是濾鏡的屬性名,這里包括alpha、blur、chroma等
多種屬性;parameters是屬性參數(shù)值。屬性名及參數(shù)值請看下面的《filter屬性及屬性值》。
具體的應(yīng)用有兩種方法:
1、先定義好CSS ,再在頁面中需要的對象上使用預(yù)先定義好的CSS,實際上CSS的設(shè)置對話框里已經(jīng)預(yù)先將這些濾鏡的語法設(shè)置好了,我們只需填上適合的具體參數(shù)即可。
2、直接在支持CSS濾鏡效果的HTML控件元素上編寫CSS filter代碼。
可視化濾鏡屬性應(yīng)用的HTML合法的控件和它們的說明
元 素 說 明
BODY 網(wǎng)頁文檔的主體元素,所有的可見范圍都在元素內(nèi)
BUTTON 表單域的按鈕,可以有“發(fā)送(submit)”、“重置(reset)”等形式
DIV 定義了網(wǎng)頁上的一個區(qū)域,這個區(qū)域的高度、寬度或者絕對位置都是以知的
IMG 圖片元素,通過指定“src"屬性來指定圖片的來源
INPUT 輸入表單域
MARQUEE 移動字幕效果
SPAN 定義了網(wǎng)頁上的一個區(qū)域,這個區(qū)域的高度、寬度或者絕對位置都是以知的
TABLE 表格
TD 表格數(shù)據(jù)單元格
TEXTAREA 文本區(qū)域
TFOOT 多行輸入文本框
TH 表格標(biāo)題單元格
THEAD 表格標(biāo)題
TR 表格行
編寫CSS filter代碼基本語法:
filter屬性及屬性值
濾鏡名 說 明 濾鏡名 說 明
Alpha 設(shè)置透明度 Blur 設(shè)置模糊效果
Chroma 設(shè)置指定顏色透明 Dropshadow 設(shè)置投射陰影
Fliph 水平翻轉(zhuǎn) Flipv 垂直翻轉(zhuǎn)
Glow 對象的外邊界增加光效 Grayscale 設(shè)置灰度(降低圖片的色彩度)
Invert 設(shè)置底片效果 Light 設(shè)置燈光投影
Mask 設(shè)置透明膜 Shadow 設(shè)置陰影效果
Wave 利用正弦波紋打亂圖片 Xray 只顯示輪廓
1、Alpha:設(shè)置透明層次
語法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,F(xiàn)inishX=finishX,F(xiàn)inishY=finishY)"
說明:
Opacity:起始值,取值為0~100, 0為透明,100為原圖。
FinishOpacity:目標(biāo)值。
Style:1或2或3
StartX:任意值
StartY:任意值
例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
2、blur:創(chuàng)建高速度移動效果,即模糊效果
語法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
說明:
Add:一般為1,或0。
Direction:角度,0~315度,步長為45度。
Strength:效果增長的數(shù)值,一般5即可。
例子:filter:Blur(Add="1",Direction="45",Strength="5")
3、Chroma:制作專用顏色透明
語法:STYLE="filter:Chroma(Color = color)"
說明:color:#rrggbb格式,任意。
例子:filter:Chroma(Color="#FFFFFF
4、DropShadow:創(chuàng)建對象的固定影子
語法: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:創(chuàng)建水平鏡像圖片
語法:STYLE="filter:FlipH"
例子:filter:FlipH
6、FlipV:創(chuàng)建垂直鏡像圖片
語法:STYLE="filter:FlipV"
例子:filter:FlipV
7、glow:加光輝在附近對象的邊外
語法:STYLE="filter:Glow(Color=color, Strength=strength)"
說明:
Color:發(fā)光顏色。
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:設(shè)置燈光投影
語法:Filter{light}
這個屬性模擬光源的投射效果。一旦為對象定義了“LIGHT"濾鏡屬性,那么就可以調(diào)用它的“方法(Method)
"來設(shè)置或者改變屬性?!癓IGHT"可用的方法有:
AddAmbient 加入包圍的光源
AddCone 加入錐形光源
AddPoint 加入點光源
Changcolor 改變光的顏色
Changstrength 改變光源的強度
Clear 清除所有的光源
MoveLight 移動光源
可以定義光源的虛擬位置,以及通過調(diào)整X軸和Y軸的數(shù)值來控制光源焦點的位置,還可以調(diào)整光源的形式
(點光源或者錐形光源)指定光源是否模糊邊界、光源的顏色、亮度等屬性。如果動態(tài)的設(shè)置光源,可能回
產(chǎn)生一些意想不到的效果。后面幾頁會有具體范例。
11、mask:創(chuàng)建透明掩膜在對象上
語法:STYLE="filter:Mask(Color=color)"
例子:filter:Mask (Color="#FFFFE0")
12、shadow:創(chuàng)建偏移固定影子
語法:filter:Shadow(Color=color, Direction=direction)
說明:
Color:#rrggbb格式。
Direction:角度,0-315度,步長為45度。
例子:filter:Shadow (Color="#6699CC", Direction="135")
13、wave:波紋效果
語法:filter: Wave(Add=add,F(xiàn)req=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');
filter類似的濾鏡火狐是不支持的,
只有IE支持他。
想實現(xiàn)類似的功能,需要使用其他手段~~