Как сделать встроенный PNG <img>прозрачным с помощью CSS?

Question

Как сделать встроенный png прозрачным внутри div? используя css

<div id="report'>
<p> some text </p>

<img src=transparent.png" />

</p>

</div>

это изображение, например. Кроме мяча я хочу сделать прозрачную другую белую область. Который выглядит серым в IE6

Я хочу сделать в css вот так div#report img {.....} возможно ли это?

Edit:

Я не хочу делать все изображение прозрачным

Обновление:

Здесь я добавил пример http://jsbin.com/ubabo3

Answer 1

IE 6 не поддерживает прозрачные файлы png по умолчанию. Вам нужно использовать небольшой взлом для достижения прозрачных файлов PNG.

http://support.microsoft.com/?scid=kb%3Ben-us%3B294714&x=12&y=11

Answer 2

Попробуйте это:

div#report img{
    background-color/**/: #000000;
    background-image/**/: none;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

Answer 3

Раньше мне приходилось сталкиваться с проблемами IE6 PNG, и это сработало.

что вы делаете, это добавляете атрибут «поведения» к вашему

div#report img { behavior: url(iepngfix.htc) } 

и вы можете скачать файл - iepngfix.htc здесь и проверить онлайн-демонстрацию .. все объясняется шаг за шагом

Answer 4

Вы не можете добавить поддержку прозрачности PNG в IE6, используя CSS. Есть хаки (некоторые из которых включают, IIRC, вызов ActiveX в таблицу стилей), и Google найдет для вас много .

(Однако в эти дни я хотел бы отметить, что IE6 находится всего в нескольких неделях от End of Life, имеет небольшую долю рынка среди моей целевой аудитории и отказывается делать дополнительную работу, чтобы убедить ее выглядеть красиво)

Answer 5

Я не уверен, что понимаю, но вы можете сделать изображение полностью прозрачным (то есть невидимым):

div#report img { visibility: hidden } // Still takes up space
div#report img { display: none } // Hidden entirely - 

однако невозможно применить это только к изображениям png, по крайней мере, в CSS 2.1. Конечно, возможно использование некоторой дополнительной магии jQuery с помощью селектора, который проверяет .png в свойстве src.

Answer 6

Свойство opacity применяется ко всем элементам (в поддерживаемых браузерах).