你现在所在的位置->首页->html/css->滤镜应用在图片中的实例

滤镜应用在图片中的实例

时间：[2006-11-21 13:37:36]　　　　　作者：作者不详

【整理：CSS】滤镜应用在图片中的实例

作者：无忧脚本　整理日期：2004.06.15

实例演示：

Alpha 滤镜 : 线形 <img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter: Alpha(opacity=100,finishopacity=0,style=1,startx=0,starty=0,finishx=468,finishy=60)'><br>
Alpha 滤镜 :放射状<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter: Alpha(opacity=100,finishopacity=0,style=2,startx=0,starty=0,finishx=468,finishy=60)'><br>
Alpha 滤镜 :长方形<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter: Alpha(opacity=100,finishopacity=0,style=3,startx=0,starty=0,finishx=468,finishy=60)'><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter:blur(add=ture,direction=135,strength=100)'><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter:filph'><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter:filpv'><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter:chroma(color=white)'><br>
<p style='filter:dropshadow(color=#ff0080,offx=5,offy=5.positive=0)'>样式表滤镜实例</p><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter:glow(color=blue,strength=10)'><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter:gray'><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter:invert'><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter:xray'><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter:light'><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter:mask(color=white)'><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter:shadow(color=red,direction=225)'><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter:wave(add=add,freq=2,lightstrength=50,phase=45,strength=10)'><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter:wave(add=add,freq=2,lightstrength=30,phase=50,strength=5)'><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style='filter:wave(add=add,freq=2,lightstrength=90,phase=25,strength=5)'><br>
<img src=/adminis/WebEditor/UploadFile/2006112113344336.gif style=''><br>
<img STYLE="filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',m11=0.7071067690849304,m12=-0.7071067690849304,m21=0.7071067690849304,m22=0.7071067690849304)" src="/adminis/WebEditor/UploadFile/2006112113344336.gif"><br>
<script language="JavaScript1.2">
function f1(){
setInterval("mdiv.filters.wave.phase+=10",100);
}
window.onload=f1
</script>
<img id="mdiv" src="/adminis/WebEditor/UploadFile/2006112113344336.gif" style="filter:wave(strength=2,freq=1,phase=0,lightstrength=20)  blur()" width="468" height="60">

<html xmlns:rdl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Rainer's Handbook</title>
<style>
body{margin:0px;padding:16px;background:#FFFFFF;overflow:auto;}
body,table,input,select,textarea,a{font-family:verdana,tahoma,arial;font-size:11px;color:#000000;word-break:break-all;}
table,img{border:0px;}
a{text-decoration:none;color:#003399;}
a:hover{color:#000000;text-decoration:underline;}
#id_div3{padding-top:8px;border-top:1px solid #000000;line-height:15px;}
#id_span3{font-size:10px;font-family:tahoma;}
</style>
<style>
#idDiv{width:80%;height:80px;background-color:#FF6633;color:#FFFFFF;padding:6px;filter : progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=0,finishOpacity=100);}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
</style>

</head>
<body>
<div id=idDiv><img src="http://www.98062.com/picsave/iori/032.gif" style="float:left;">请从下方选择滤镜参数的值。</div>
<br>
<table><tr><td>
<select id="idSel1" onchange="rdl_change();">
<option value="0">---渐变样式---
<option value="0">0
<option value="1">1
<option value="2">2
<option value="3" selected>3
</select>
</td><td>
<select id="idSel2" onchange="rdl_change();">
<option value="0">---开始透明度---
<option value="0" selected>0
<option value="25">25
<option value="50">50
<option value="75">75
<option value="100">100
</select>
<select id="idSel3" onchange="rdl_change();">
<option value="0">---结束透明度---
<option value="0">0
<option value="25">25
<option value="50">50
<option value="75">75
<option value="100" selected>100
</select>
</td></tr></table>
<div id=idCodeDiv>filter : progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=0,finishOpacity=100);</div>

<html xmlns:rdl>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Rainer's Handbook</title>
<style>
body{margin:0px;padding:16px;background:#FFFFFF;overflow:auto;}
body,table,input,select,textarea,a{font-family:verdana,tahoma,arial;font-size:11px;color:#000000;word-break:break-all;}
table,img{border:0px;}
a{text-decoration:none;color:#003399;}
a:hover{color:#000000;text-decoration:underline;}
#id_div3{padding-top:8px;border-top:1px solid #000000;line-height:15px;}
#id_span3{font-size:10px;font-family:tahoma;}
#idDiv{width:80%;height:80px;background-color:#000000;color:#FFFFFF;padding:4px;filter:progid:DXImageTransform.Microsoft.BasicImage();}

</style>
<script>
var sFilter="filter : progid:DXImageTransform.Microsoft.BasicImage(";
function rdl_change(e){
var oDiv=document.all("idDiv");
with (document.all("idSel")) var sValue=options[selectedIndex].value;
if (sValue=="Mask=1") oDiv.filters[0].MaskColor=0xFFFFFF;
eval("oDiv.filters[0]."+sValue);
}
</script>

</head>
<body>
<div id=idDiv><img src="/adminis/WebEditor/UploadFile/20061121133447560.gif" style="float:left;">请从下方选择滤镜效果。</div>
<br>
<select id="idSel" onchange="rdl_change();">
<option value="GrayScale=1">灰度(GrayScale)
<option value="Mirror=1">反转(Mirror)
<option value="opacity=0.5">透明(opacity)
<option value="XRay=1">X光(XRay)
<option value="Invert=1">反相(Invert)
<option value="Mask=1">遮罩(Mask)
<option value="Rotation=2">旋转(Rotation)
</select>
<br>

<br> <br> <br>
<div id=id_div3>苏昱作品·版权所有<br><span id=id_span3>&copy;2002 Rainer Su . All rights reserved . Terms of Use .</span></div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Filter sample</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<META NAME="AUTHOR" CONTENT="InetSDK">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">

<LINK REL="stylesheet" HREF="/workshop/basicSDKIE4.css" TYPE="text/css">

</HEAD>

<DIV id="div1" style="position: absolute; top:20; left:20; width:130; height:130; font-size:100; text-align:center; background-color:red; filter: revealTrans(Transition=1, Duration=.01)" onclick=Count() onfilterchange=Repeat()></DIV>
<div style="position:absolute; top:150; left:20"><br>Click the square to see something cool!</div>
<br>

var garTransitions = new Array(24); //arrary of filter strings
var g_aColors = new Array(24); // array of colorpair objects

garTransitions[0] = "progid:DXImageTransform.Microsoft.RandomDissolve()";
garTransitions[1] = "progid:DXImageTransform.Microsoft.Iris(irisStyle='star', motion='out')";
garTransitions[2] = "progid:DXImageTransform.Microsoft.Iris(irisStyle='diamond', motion='in')";
garTransitions[3] = "progid:DXImageTransform.Microsoft.Iris(irisStyle='cross', motion='out')";
garTransitions[4] = "progid:DXImageTransform.Microsoft.Iris(irisStyle='circle', motion='in')";
garTransitions[5] = "progid:DXImageTransform.Microsoft.Iris(irisStyle='square', motion='out')";
garTransitions[6] = "progid:DXImageTransform.Microsoft.Iris(irisStyle='plus', motion='in')";
garTransitions[7] = "progid:DXImageTransform.Microsoft.Barn(orientation='vertial' motion='in')";
garTransitions[8] = "progid:DXImageTransform.Microsoft.Barn(orientation='vertial' motion='out')";
garTransitions[9] = "progid:DXImageTransform.Microsoft.Barn(orientation='horizontal' motion='in')";
garTransitions[10] = "progid:DXImageTransform.Microsoft.Barn(orientation='horizontal' motion='out')";
garTransitions[11] = "progid:DXImageTransform.Microsoft.Pixelate()";
garTransitions[12] = "progid:DXImageTransform.Microsoft.Inset()";
garTransitions[13] = "progid:DXImageTransform.Microsoft.Checkerboard(Direction='left')";
garTransitions[14] = "progid:DXImageTransform.Microsoft.Checkerboard(Direction='right')";
garTransitions[15] = "progid:DXImageTransform.Microsoft.Checkerboard(Direction='down')";
garTransitions[16] = "progid:DXImageTransform.Microsoft.Checkerboard(Direction='up')";
garTransitions[17] = "progid:DXImageTransform.Microsoft.RandomBars(motion='horizontal')";
garTransitions[18] = "progid:DXImageTransform.Microsoft.RandomBars(motion='vertical')";
garTransitions[19] = "progid:DXImageTransform.Microsoft.Slide(bands=5, slideStyle='push')";
garTransitions[20] = "progid:DXImageTransform.Microsoft.Slide(bands=5, slidestyle='swap')";
garTransitions[21] = "progid:DXImageTransform.Microsoft.Slide(bands=5, slidestyle='hide')";
garTransitions[22] = "progid:DXImageTransform.Microsoft.Spiral()";
garTransitions[23] = "progid:DXImageTransform.Microsoft.Stretch(stretchStyle='push')";

// constructor for a color pair object. holds a foreground and a background color.
function ColorPair(sColor, sBGColor)
{
    this.m_color = sColor;
    this.m_bgColor = sBGColor;
}

// build a global table of foreground/background color pairs. 
// Initially these were calculated, but, due to collisions, the use of a table guarantees 
// that the fg/bg colors never match. If a new transition is added the table must be expanded
function BuildColorTable()
{
    g_aColors[0] = new ColorPair('#000000', '#FFFFFF');
    g_aColors[1] = new ColorPair('#035b60', '#6174c0');
    g_aColors[2] = new ColorPair('#033450', '#10a9a0');
    g_aColors[3] = new ColorPair('#030d40', '#0fde80');
    g_aColors[4] = new ColorPair('#02e630', '#0f13d0');
    g_aColors[5] = new ColorPair('#02bf20', '#6e4840');
    g_aColors[6] = new ColorPair('#d29810', '#0d7d20');
    g_aColors[7] = new ColorPair('#f27100', '#0cb200');
    g_aColors[8] = new ColorPair('#0249f0', '#0be6e0');
    g_aColors[9] = new ColorPair('#0222e0', '#ff0000');
    g_aColors[10] = new ColorPair('#01fbd0', '#0a50a0');
    g_aColors[11] = new ColorPair('#01d4c0', '#098580');
    g_aColors[12] = new ColorPair('#a1adb0', '#08ba60');
    g_aColors[13] = new ColorPair('#0186a0', '#07ef40');
    g_aColors[14] = new ColorPair('#015f90', '#072420');
    g_aColors[15] = new ColorPair('#a13880', '#065900');
    g_aColors[16] = new ColorPair('#011170', '#058de0');
    g_aColors[17] = new ColorPair('#00ea60', '#04c2c0');
    g_aColors[18] = new ColorPair('#00c320', '#03f7a0');
    g_aColors[19] = new ColorPair('#009c40', '#032ca0');
    g_aColors[20] = new ColorPair('#00e530', '#026160');
    g_aColors[21] = new ColorPair('#004e20', '#019640');
    g_aColors[22] = new ColorPair('#002710', '#00cb20');
    g_aColors[23] = new ColorPair('#038270', '#123fe0');
}

function Repeat()
{
    fRunning = 0;
    Count();
}

function Count()
{
    if (fRunning == 0)
    {
        fRunning = 1;
        div1.style.filter = garTransitions[iTransNumber];
        div1.filters[0].apply();
        div1.innerText = iTransNumber;
        if (iTransNumber <= g_aColors.length) // bounds check just in case
        {
            div1.style.backgroundColor = g_aColors[iTransNumber].m_bgColor;
            div1.style.color = g_aColors[iTransNumber].m_color;
        }

div1.filters[0].play(speed);

if (iTransNumber == 0)
        {
            iTransNumber = iMaxTransition; // take it from the top
            return;
        }

iTransNumber--;
    
        if ( speed > .01)
        {
            speed=(speed*31)/32;
        }
        
    }
}
</script>

<DIV STYLE="position:absolute;top:200">

<BR><BR><BR>
&copy; <A CLASS="clsIncCpyRt" HREF="/isapi/gomscom.asp?target=/misc/cpyright.htm" TARGET="_top">2001 Microsoft Corporation. All rights reserved. Terms of use</A>.

</DIV>
</BLOCKQUOTE>
</BODY>
</HTML>

}
</script>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse"

bordercolor="#111111" width="100%" id="AutoNumber1" height="234">
  <tr>
    <td width="39%" height="16" align="right"><input type="button" id="bu1" value="上一页"

onClick="peimage();" style="border-width:1px;width:50;"></td>
    <td width="19%" height="16"></td>
    <td width="42%" height="16"><input type="button" id="bu2" value="下一页" onClick="eximage();"

style="border-width:1px;width:50;"></td>
  </tr>
  <tr>
    <td width="100%" colspan="3" height="217"><div id="image" align="center"

style="width:150px;height:150px;filter:progid:DXImageTransform.Microsoft.Pixelate();">
      <img border="0" id="pic" src="images/1.jpg" width="150" height="150"></div></td>
  </tr>
</table>

代码解析：

对这里用到的几个参数进行说明：
“0”没有渐进

“1”直线渐进

“2”圆形渐进

“3”矩形渐进

“opacity”为不透明的程度百分比。

“Opacity”代表透明度水准，范围是0---100，其实就是百分比的意思，如果你想变为全透明，那么就用0代替Opacity后面的问号。

“FinishOpacity”就是用来指定结束时的透明度，范围跟Opacity一样（FinishOpacity为可选参数，不想要的话就去掉它。

“Style”是指定透明区域的形状特征，0代表统一形状，1代表线形，2代表放射形，3代表长方形。比如我们一般可以写成Style=1。

“startX”与”startY”就是代表渐变效果开始的X与Y坐标，（坐标应该知道是什么吧）一般我们设置为StartX=0， StartY=0（这样就是表示的透明效果是从图片的左上角开始的。）

“FinishX”与“FinishY”，当然，这个就是代表渐变效果结束时的横纵坐标了。这里很关键，填什么数值那就要看你的图片高与宽了。假设我们的图片高与宽分别是100、200像素，那么就可以写成FinishX=200，FinishY=100。（如果你只想要一半的面积是透明，那么可以设置成FinishX=100， FinishY=50）。

“FlipH”滤镜，使图片水平翻转。“FlipH”滤镜是CSS的6个无参数滤镜中的一个，可直接使用，在Dreamweaver中可以同有参数的滤镜一样使用。

“FlipV”滤镜，使图片垂直翻转。

“invert”滤镜，使图片出现照片底片的效果。

“xray”使图片出现X光照射的轮廓效果。

【声明】本站刊载的《滤镜应用在图片中的实例》一文如果有侵害你权益的情况，请联系我们。我们将及时采取措施。
QQ：44637339　Email:just6@163.com　Tel:13355163107 Lining studios