개체의 원본 내용을 초점을 흐리게 하여 표현한다.

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

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


애트리뷰트 속성 설명
enabled Enabled 필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능
makeShadow MakeShadow 내용이 그림자로 표현될 것인가를 부울값으로 반환하거나 설정한다.
pixelRadius PixelRadius 흐려지는 범위의 반경을 픽셀 단위로 반환하거나 설정한다.
shadowOpacity ShadowOpacity Blur 필터로 생성되는 그림자의 선명도를 반환하거나 설정한다.
특기
적용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, FRAMESET, 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, S, SAMP, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TD, TEXTAREA, TH, TT, U, UL, VAR, XMP

DIV에서 필터 속성 예제

정상 이미지
Blur 효과
Blur 효과
Blur 효과
Blur 효과
Blur 효과
<STYLE>
.divClass{width:500;font-size:30;line-height:1.2em;font-weight:bold;}
.aClass{width:700;border:solid 1 blue;padding:1;margin-bottom:5;background:efe}
</STYLE>
<DIV class="divClass"><IMG src='../../gif/rfproperty.gif'> 정상 이미지</DIV>
<DIV class="aClass"></DIV>
<DIV id=areaA class="divClass"
  style="filter:progid:DXImageTransform.Microsoft.Blur(Enabled=true,makeShadow=true)">
<IMG src="../../gif/rfproperty.gif"> Blur 효과</DIV>
<DIV class="aClass"><SCRIPT>document.write(areaA.style.filter)</SCRIPT></DIV>
<DIV id=areaB class="divClass"
  style="filter:progid:DXImageTransform.Microsoft.Blur(Enabled=true,makeShadow=true,shadowOpacity=.5)">
<IMG src="../../gif/rfproperty.gif"> Blur 효과</DIV>
<DIV class="aClass"><SCRIPT>document.write(areaB.style.filter)</SCRIPT></DIV>
<DIV id=areaC class="divClass"
  style="filter:progid:DXImageTransform.Microsoft.Blur(makeShadow=true,shadowOpacity=.9,PixelRadius=4)">
<IMG src="../../gif/rfproperty.gif"> Blur 효과</DIV>
<DIV class="aClass"><SCRIPT>document.write(areaC.style.filter)</SCRIPT></DIV>
<DIV id=areaD class="divClass"
  style="filter:progid:DXImageTransform.Microsoft.Blur(shadowOpacity=.1,makeShadow=true)">
<IMG src="../../gif/rfproperty.gif"> Blur 효과</DIV>
<DIV class="aClass"><SCRIPT>document.write(areaD.style.filter)</SCRIPT></DIV>
<DIV id=areaE class="divClass"
  style="filter:progid:DXImageTransform.Microsoft.Blur(shadowOpacity=.8,makeShadow=true)">
<IMG src="../../gif/rfproperty.gif"> Blur 효과</DIV>
<DIV class="aClass"><SCRIPT>document.write(areaE.style.filter)</SCRIPT></DIV>