개체의 투명한 내용을 색상을 넣어 표시하고, 투명하지 않은 부분은 투명하게 표현한다.

Script object.style.filter='progid:DXImageTransform.Microsoft.(propVal)'
HTML <ELEMENT style="filter:progid:DXImageTransform.Microsoft.(propVal)">
MaskFilter 필터 예제(클릭)
인수
propVal : (속성 문자열)
필터가 가질 수 있는 한개 이상의 속성들로 속성=값들을 컴마(,)로 연결, 구성된 문자열이다.

애트리뷰트 속성 설명
color Color 필터에 적용되는 색상값을 반환하거나 설정한다.
enabled Enabled 필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능
특기

BasicImage 필터를 사용하여 더 효과적으로 표현할 수 있다.

적용style
A, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, hn, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, MARQUEE, MENU, NOBR, OL, OBJECT, P, plainText, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, STYLE, SUB, SUP, TABLE, TD, TEXTAREA, TH, TT, U, UL, VAR, XMP

DIV에서 필터 속성 예제


MaskFilter 필터 예제
필터 표시창
<SCRIPT>
aColors=new Array('pink','red','navy','magenta','green','blue','brown','teal');
Cidx=0;
Fidx=3;
function doPlay(job){
  if(!job) divObj.filters[0].Enabled=false;
  else{
    divObj.style.backgroundColor='';
    divObj.filters[0].Enabled=true;
    if (job==1){
    } else if (job==2){
      Cidx++;
      divObj.filters[0].color=aColors[Cidx%aColors.length];
    } else if (job==3){
      Fidx++;
    } else if (job==4){
      divObj.style.backgroundColor=aColors[(Cidx+1)%aColors.length];
    }
    divObj.filters[0].Apply();
    divObj.style.color=aColors[Fidx%aColors.length];
    divObj.filters[0].Play();
  }
  str='';
  str+='filter='+divObj.style.filter+'<BR>';
  str+='⇒ Enabled=('+divObj.filters[0].Enabled+'), MaskFilter(color='+divObj.filters[0].color+'), ';
  str+='background=('+divObj.style.backgroundColor+'), color=('+divObj.style.color+')<BR>';
  show.innerHTML=str;
}
</SCRIPT>

<STYLE>
.divClass {width:600;height:100;font-size:30;line-height:1.2em;font-weight:bold;padding:9}
.butClass {width:120}
</STYLE>
<DIV id="divObj" class="divClass"
  style="filter:progid:DXImageTransform.Microsoft.MaskFilter(color=pink);color:red;">
<IMG src=../../gif/rfexample.gif width=100><BR>
MaskFilter 필터 예제
</DIV>
<BUTTON onclick="doPlay(0)" class="butClass">정상 이미지</BUTTON>
<BUTTON onclick="doPlay(1)" class="butClass">Mask 필터 효과</BUTTON>
<BUTTON onclick="doPlay(2)" class="butClass">필터색상</BUTTON>
<BUTTON onclick="doPlay(3)" class="butClass">글자 색상</BUTTON>
<BUTTON onclick="doPlay(4)" class="butClass">배경색 넣으면?</BUTTON>
<DIV id=show style="width:600;height:45;border:solid 1 blue;padding:3">필터 표시창</DIV>
</DIV>