IE에서 투명한 배경으로 보이지 않는 이미지 만들기

Question

IE (모든 버전 - FF, Opera, Safari, Chrome 등에서 작동)에서 작동하도록 노력하고 있습니다.

배경 이미지가있는 DIV가 있어야합니다. DIV에는 투명해야 onMouseOver 이미지가 포함되어 있습니다. 이제 예상되는 동작은 DIV- 배경이 투명한 이미지 (IE가 아닌 모든 브라우저에서 수행)를 통해 빛을 발할 것이라는 것입니다.
대신 이미지가 투명 해지는 것처럼 보이지만 흰색 배경에서는 이미지를 통해 DIV의 배경을 볼 수 없습니다.

<div><a href="#" class"dragItem"><img /></a></div> 

그리고 일부 CSS : 여기

가 일부 코드의

이 모든이 도장 드래그 - 앤 - 드롭 시스템에 포함되어

.dojoDndItemOver { 
    cursor   : pointer; 
    filter   : alpha(opacity = 50); 
    opacity  : 0.5; 
    -moz-opacity : 0.5; 
    -khtml-opacity : 0.5; 
    } 
    .dragItem:hover { 
    filter   : alpha(opacity = 30); 
    opacity  : 0.3; 
    -moz-opacity : 0.3; 
    -khtml-opacity : 0.3; 
    background  : none; 
    } 

, 그래서 dojoDndItemOver가 자동으로 설정됩니다 DIV on MouseOver, dragItem은 이미지 주위의 href로 설정됩니다 (이미지에서 동일한 클래스를 사용하면 IE가 href라는 다른 항목에 "호버"를 지원하지 않으므로 이미지에서 직접 작동하지 않습니다).

아이디어가 있으십니까? 또는 IE 투명도를 제공하는 대신 실제 투명도를 제공하고 아래에 무엇이 있는지 보여주는 대신 이미지를 투명하게 "시뮬레이션"하는 것입니까?

Answer 1

a.dragItem {/*Background behind the image*/} 
a.dragItem img {/*Image is opaque, hiding the background*/} 
a.dragItem:hover img {/*Image is transparent, revealing the background*/} 

Answer 2

IE는 w3Schools CSS Image transparency에서 가져온 CSS filter:alpha(opacity=x)을 사용합니다. DIV 배경에도 적용 할 수 있습니다.

div.transbox 
    { 
    width:400px; 
    height:180px; 
    margin:30px 50px; 
    background-color:#ffffff; 
    border:1px solid black; 
    /* for IE */ 
    filter:alpha(opacity=60); 
    /* CSS3 standard */ 
    opacity:0.6; 
    } 

나는 필터가 나쁜 생각이라고 생각, 그래서 또한 당신은 IE as shown here 투명한 PNG 파일을 사용할 수 있습니다.