Что лучше, прозрачность CSS или прозрачность PNG?

Question

Должен ли я использовать прозрачность PNG или CSS прозрачность?

Мой первый инстинкт - использовать CSS. Однако я где-то слышал, что фильтр в IE медленный и что я получу лучшие результаты с PNG (игнорируя IE6).

Однако из личного опыта я знаю, что прозрачность PNG в FF3 медленная.

Есть ли определенный ответ на это?

Спасибо.

Answer 1

Это два разных решения двух разных проблем. Прозрачность CSS (я предполагаю, что вы имеете в виду свойство opacity) сделает весь элемент (его границы, фон и содержимое) прозрачным, тогда как прозрачность альфа PNG полезна только в ситуациях, когда вы используете изображения, например, фон элемента .

Я не могу придумать много ситуаций, когда вы могли бы использовать любой из них с одинаковым эффектом.

В CSS3 есть, конечно, цвета RGBA, однако поддержка браузера в настоящее время слишком мала, чтобы его можно было использовать в общедоступных сайтах / приложениях.

P.S. Я не могу сказать, что столкнулся с какими-либо проблемами с производительностью FF3 alpha PNG.

---

Продолжение комментария:

OK. В этом случае я бы выбрал свойство непрозрачности CSS.

Хотя производительность фильтров может быть неоптимальной в IE6, это означает, что вам не нужно тратить полосу пропускания и дополнительный HTTP-запрос на изображение. Кроме того, если вы хотите, чтобы изображение работало и в IE6, вам нужно использовать AlphaImageLoader, который, я уверен, будет таким же медленным (если не медленнее), чем альфа-фильтр.

Answer 2

Я только что провел быстрый ненаучный тест в Firefox 3.0.11 на Mac.

Моим тестом было наложение div и прокрутка вверх и вниз несколько раз.

Один использованный css:

background: #000; opacity:0.8;

Другой использовал PNG размером 10px 24 бита того же.

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

Firefox 3.0.11

Непрозрачность CSS: примерно 60% использования процессора.

PNG: загрузка процессора составляет около 20%.

Safari 4.0:

Непрозрачность CSS: приблизительно 80% (с пиками 120%!)

PNG: приблизительно 76% (без пиков)

Итак, что касается производительности, кажется, что PNG - победитель.

Answer 3

в IE есть УТЕЧКИ ПАМЯТИ (включая 8) при использовании png 24 бит! пожалуйста, будьте осторожны.

http://robertnyman.com/2009/05/26/serious-memory-leak-issue-with-24-bit-png-images-with-alpha-transparency-in-internet-explorer/

Я использовал pngs с некоторыми jquery для скольжения текста, и скрипт невероятно медленный! Я удалил фоновые pngs и скрипт в порядке.

Answer 4

Прозрачность PNG может делать то, чего не может CSS - прозрачность альфа-канала PNG может иметь разную степень частичной прозрачности для разных частей изображения, тогда как непрозрачность CSS не может этого сделать.

Answer 5

Хотя CSS, вероятно, является "правильным" способом, я думаю, что PNG безопаснее, проще и лучше реализован.