filter & position in IE8] filter 적용범위에 관한 내용입니다.

1)
IE8 에서 가끔(?) 사용해보고 있는 filter 효과중에
Alpha(opacity=..) 이 있는데요,

그것이 적용되는 범위에 특이점이 있어서 서술해보고 싶었습니다.

...

2)

0
<div style="position:relative;">
  <div style="width:100px; height:100px; overflow:hidden; position:relative; background-color:green;">
    <div style="position:relative; left:10px; top:0px;">
      <img width=100 height=50 />
      12
    </div>
    34
  </div>
  <div style="width:100px; height:100px; overflow:hidden; position:relative; background-color:lightgray; left:0px; top:-20px; filter:Alpha(opacity=50);">
    <div style="position:relative; left:30px; top:0px;">
      <img width=100 height=50 />
      56
    </div>
    78
  </div> 
  <div style="position:relative; left:50px; top:0px;">
    <div style="width:100px; height:100px; overflow:hidden; position:relative; background-color:darkred; left:0px; top:-40px; filter:Alpha(opacity=50);">
      <img width=100 height=50 />
      9a
    </div>
    bc
  </div> 
</div>
7

...

3)

0

12

34

56

78

9a

bc

7

...

4)
12, 34 부분에 나오는 부분은 딱히 필터가 없는 부분이라
모두 정상으로 나오구요,

56, 78 부분이 필터를 적용해서 절반의 흐림효과를 내도록 했습니다만,
자세히(?)보면, img 부분과 56 부분은 흐림효과가 적용돼지 않았다는 것을 보실 수 있죠.

그 다음에 나오는 9a, bc 에서는 9a 부분만 흐림효과가 적용되어있구요.
(요건 9a 부분만 흐림효과 적용했기 때문입니다..)

기존에 IE5 용으로 만들어봤을 땐, 
중복효과..에 대해서 큰 신경을 안썼습니다만,
(그냥, 만들어지는대로 보기만 했거든요..)

.. IE8 에서는 적용되는 효과와 관련해서
position:relative 가 이전에 가지고있는 filter 를 삭제한다는 생각을 염두해 두어야 할겁니다.
이 효과는 position:absolute; 에서도 동일하게 적용됩니다.

.. 혹시나, IE8 의 filter 를 적용하는 분들이라면
한번쯤 더 생각해보시기를 바랍니다.

페이지 헤더쪽에 <!DOCTYPE> 이 적용된 경우
효과가 적절하게 나올 수 있는지는
실제 표시되는 페이지의 표시레벨에 따라 달라질 수 있으니까요.

easyBow killofki@.