Сделать изображение прозрачным в IE, чтобы показать непрозрачный фон - PullRequest
Новая
       27

Сделать изображение прозрачным в IE, чтобы показать непрозрачный фон

2 голосов
/ 08 апреля 2010

Я пытаюсь заставить эту вещь работать в IE (любая версия - работает в FF, Opera, Safari, Chrome ...):

У меня есть DIV с background-image.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;
  }

Все это встроено в систему Dojo Drag-n-Drop, поэтому dojoDndItemOver будет автоматически установлен в DIV на MouseOver, dragItem будет установлено на href вокруг изображения(использование того же класса на изображении напрямую не работает вообще, так как IE не поддерживает «hover» для других элементов, которые имеют href).

Есть идеи?Или это IE-специальность - просто «имитировать» прозрачность на изображениях, просто как-то затушевывая их, вместо того, чтобы обеспечить реальную прозрачность и показывать то, что ниже?

Ответы [ 2 ]

2 голосов
/ 08 апреля 2010 
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*/}
1 голос
/ 08 апреля 2010

IE использует CSS filter:alpha(opacity=x), взятый из w3Schools CSS Прозрачность изображения .Вы также можете применить его к фонам 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;
  }

Я думаю, что фильтры - плохая идея, поэтому вы также можете использовать прозрачные png с IE , как показано здесь .

...