개체 내용의 선명도(opacity)를 조정하는 필터이다.

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

progid:DXImageTransform.Microsoft. 부분은 생략이 가능하나 속성과 효과가 다소 다를 수 있다.


애트리뷰트 속성 설명
enabled Enabled 필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능
finishOpacity FinishOpacity Alpha 필터에서 점진적으로 적용되는 종결점의 선명도를 반환하거나 설정한다.
finishX FinishX 점진적으로 적용되는 종결점의 수평 좌표를 반환하거나 설정한다.
finishY FinishY 점진적으로 적용되는 종결점의 수직 좌표를 반환하거나 설정한다.
opacity Opacity 필터의 시작하는 선명도를 반환하거나 설정한다.
startX StartX 점진적으로 적용되는 시작점의 수평 좌표를 반환하거나 설정한다.
startY StartY 점진적으로 적용되는 시작점의 수직 좌표를 반환하거나 설정한다.
style Style 점진적으로 적용되는 형태를 반환하거나 설정한다.
특기

다음과 같이 허용되는 Style 속성값들을 제공하여 Alpha 필터를 적용할 수 있다.

0균일 Opacity 속성값이 개체 전체면에 적용된다.
1선형 시작점 좌표 StartX, StartY 점에서 Opacity 속성값으로 시작하여 균일하고 점진적으로 선형으로 개체 적용되고, 종결점 좌표 FinishX, FinishY에서 FinishOpacity 속성값으로 완료된다.
2원형 개체의 중심점에서 Opacity 속성값으로 시작하여 균일하고 점진적으로 원형으로 밖으로 개체 적용되고, FinishOpacity 속성값으로 종결되며, 개체의 모서리에는 적용되지 않는다.
3사각형 개체의 사각형 각 면에서 Opacity 속성값으로 시작하여 균일하고 점진적으로 속으로 개체 적용되고, FinishOpacity 속성값으로 개체의 중앙에서 종결한다.
적용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에서 필터 속성 예제


Alpha 필터 예제
필터 표시창
<SCRIPT>
var clickBut=false;
var style=0;
function doPlay(){
  divObj.filters[0].Style=(style++)%4;
  divObj.filters[0].Opacity=100;
  divObj.filters[0].FinishOpacity=0;
  if (clickBut){
    clickBut=false;
    divObj.style.backgroundColor='blue';
  } else {
    clickBut=true;
    divObj.style.backgroundColor="green";
  }
  str='divObj.style.filter='+divObj.style.filter+'<BR>';
  str+='⇒Enabled=('+divObj.filters[0].Enabled+'), ';
  str+='Style=('+divObj.filters(0).Style+'), ';
  str+='Opacity=('+divObj.filters(0).Opacity+'), FinishOpacity=('+divObj.filters[0].FinishOpacity+')<BR> ';
  show.innerHTML=str;
}
</SCRIPT>
<DIV id="divObj"
  style="width:500;height:200;background-color:blue;padding=5;font-size:40;line-height:1.2em;color:yellow;font-weight:bold;
  filter:progid:DXImageTransform.Microsoft.Alpha(Style=3);">
<IMG src=../../gif/rfexample.gif width=100><BR>
Alpha 필터 예제
</DIV>
<BUTTON onclick="doPlay()" style="width:500">필터 효과를 위해 클릭해 보라</BUTTON>
<DIV id=show style="width:500;height:50;border:solid 1 blue;padding:3;font-size:80%">필터 표시창</DIV>