css透明

opacity: 0.5; /* for IE9 and other browsers */
filter: alpha(opacity=50); /* for IE8 and earlier */

CSS中filter屬性

語法:style="filter:filtername(fparameter1, fparameter2...)"

(Filtername為濾鏡的名稱,fparameter1、fparameter2等是濾鏡的參數(shù))

濾鏡說明:

Alpha:設(shè)置透明層次
blur:創(chuàng)建高速度移動(dòng)效果,即模糊效果
Chroma:制作專用顏色透明
DropShadow:創(chuàng)建對(duì)象的固定影子
FlipH:創(chuàng)建水平鏡像圖片
FlipV:創(chuàng)建垂直鏡像圖片
glow:加光輝在附近對(duì)象的邊外
gray:把圖片灰度化
invert:反色
light:創(chuàng)建光源在對(duì)象上
mask:創(chuàng)建透明掩膜在對(duì)象上
shadow:創(chuàng)建偏移固定影子
wave:波紋效果
Xray:使對(duì)象變得像被x光照射一樣
1、濾鏡:Alpha
語法: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
語法: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
語法: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:發(fā)光顏色。
Strength:強(qiáng)度(0-100)
例子:filter:Glow(Color="#6699CC",Strength="5")
8、濾鏡:gray
語法:STYLE="filter:Gray"
例子:filter:Gray
9、濾鏡:invert
語法:STYLE="filter:Invert"
例子:filter:Invert
10、濾鏡:mask
語法:STYLE="filter:Mask(Color=color)"
例子:filter:Mask (Color="#FFFFE0")
11、濾鏡:shadow
語法:filter:Shadow(Color=color, Direction=direction)
說明:
Color:#rrggbb格式。
Direction:角度,0-315度,步長為45度。
例子:filter:Shadow (Color="#6699CC", Direction="135")
12、濾鏡:wave
語法:filter: Wave(Add=add,F(xiàn)req=freq,LightStrength=strength,Phase=phase,Strength=strength)
說明:
Add:一般為1,或0。
Freq:變形值。
LightStrength:變形百分比。
Phase:

背景透明實(shí)例(河北頻道輪播中標(biāo)題背景)

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='#00000000',endColorStr='#a4000000'); /IE 6 7 8/
background: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.8)); /* IE 10 /
background:-moz-linear-gradient(top,rgba(0,0,0,0), rgba(0,0,0,.8));/
火狐/
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(rgba(0,0,0,0)), to(rgba(0,0,0,.8)));/
谷歌/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0,0,0,0)), to(rgba(0,0,0,.8))); /
Safari 4-5, Chrome 1-9/
background: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.8)); /
Safari5.1 Chrome 10+/
background: -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.8)); /
Opera 11.10+*/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 前提:除IE外,目前主流瀏覽器 Opera 9.0+,Safari 1.2(WebKit 125) +,chro...
    DecadeHeart閱讀 1,729評(píng)論 0 0
  • 1.css設(shè)置透明度 filter:alpha(opacity=50); /*IE濾鏡,透明度50%*/ -moz...
    _v_xw閱讀 240評(píng)論 0 0
  • 在社會(huì)的最底層,往往不是與世無爭(zhēng),往往不是田園山水,因?yàn)橛腥司陀薪?社會(huì)最底層,往往是更惡劣的江湖! 在社會(huì)資...
    民間正道閱讀 193評(píng)論 0 0
  • 生活是一種經(jīng)歷 無論是病痛抑或其他 生活是不斷的抉擇 掙扎著想要完美一點(diǎn) 生活是不如行動(dòng) 想要開心想要鼓勵(lì)自己 去...
    芬芬vstar閱讀 264評(píng)論 0 0
  • 照片我就傳到網(wǎng)易相冊(cè)了。點(diǎn)擊這里查看。 不得不再次抱怨一下中國的墻。這個(gè)墻是雙向的,我在中國的時(shí)候訪問國外網(wǎng)站慢,...
    __Hokuang__閱讀 247評(píng)論 0 1