Должен ли я использовать прозрачность PNG или прозрачность CSS?Что лучше, прозрачность CSS или прозрачность PNG?
Мой первый инстинкт - пойти с CSS. Однако я где-то слышал, что фильтр в IE медленный и что я получаю лучшие результаты с PNG (игнорируя IE6).
Однако из личного опыта я знаю, что прозрачность PNG медленна в FF3.
Есть ли определенный ответ на этот вопрос?
Спасибо.
Это два разных решения двух различных проблем. Прозрачность CSS (я предполагаю, что вы ссылаетесь на свойство непрозрачности) сделает весь элемент (его границу, фон и контент) прозрачным, тогда как альфа-прозрачность PNG полезна только в ситуациях, когда вы используете изображения, например, фон элементов ,
Я не могу думать о многих ситуациях, когда вы могли бы использовать либо тот же эффект.
Есть, конечно, RGBA colours in CSS3, однако поддержка браузера в настоящее время слишком низка, чтобы быть жизнеспособным вариантом в публичных сайтах/приложениях.
P.S. Я не могу сказать, что сам столкнулся с проблемами производительности FF3 alpha PNG.
Последующая деятельность по итогам комментариев:
OK. В этом случае я бы выбрал свойство непрозрачности CSS.
Хотя производительность фильтров может быть не оптимальной в IE6, это означает, что вам не нужно тратить пропускную способность и дополнительный HTTP-запрос на изображение. Кроме того, если вы хотите, чтобы изображение работало в IE6, вам придется использовать AlphaImageLoader, который, я уверен, будет таким же медленным (если не медленнее), чем альфа-фильтр.
Я помещаю прозрачное наложение на некоторые элементы, и в этом случае настройка фонового изображения элемента наложения или непрозрачности будет работать. Мой вопрос относится к скорости любого решения в большинстве браузеров. Спасибо. – 2009-02-14 20:54:23
Ответ в ответ (был слишком длинным). –
Скорость, о которой я говорю, это скорость рендеринга, а не скорость загрузки, что в моей ситуации гораздо менее важно. При прокрутке или отображении (IE, используя JS для скрытия/показа), верно ли, что PNG работает лучше фильтра непрозрачности в IE7. Если бы мне пришлось, я бы использовал другой css для класса для IE/FF. – 2009-02-14 21:29:06
PNG прозрачность может делать вещи CSS не может - PNG альфа-канал прозрачности может иметь разную степень частичной прозрачности для разных частей изображения, в то время как непрозрачность CSS не может этого сделать.
Хорошо ... вы * можете * использовать градиенты CSS (возможно, рядом с '-webkit-mask') –
Я только что сделал не научный тест в Firefox 3.0.11 на Mac.
Мой тест состоял в том, чтобы наложить div и прокручивать вверх и вниз несколько раз.
Один используемый CSS:
background: #000; opacity:0.8;
Другой использовали 10px 24bit PNG одного и того же.
Я измерил следующие результаты с монитора активности (так гадать, не точно)
Firefox 3.0.11
CSS непрозрачности: примерно 60% загрузки процессора.
PNG: примерно 20% cpu использование.
Safari 4.0:
CSS непрозрачности: примерно 80% (с пиками на 120%!)
PNG: примерно 76% (без пиков на всех)
Так, насколько производительность идет, похоже, победителем является PNG.
' Что касается производительности, кажется, что PNG является победителем. «На Mac, по крайней мере. Вы тестировали в Windows? – Moshe
Возможно, им немного ответили, но я думаю, что это довольно очевидно, что производительность будет лучше с png - если вы измеряете ее в CPU. Но я думаю, что основной проблемой производительности является размер img. Так как вы можете защитить много байтов, используя .jpg Я думаю, что в большинстве случаев лучше работать с непрозрачностью/rgba. – davedadizzel
Хотя CSS, вероятно, является «правильным» способом, я думаю, что PNG безопаснее, проще и лучше реализовано.
Есть ПАМЯТЬ УТЕЧКИ в IE (включая 8) при использовании png 24 бит! будьте осторожны.
Я использовал PNGs с некоторыми JQuery слайд текст и сценарий мертв медленно! Я удалил фоновые pngs и сценарий в порядке.
+1 для ссылки. – Moshe
Этот вопрос * действительно * нуждается в контексте. И задать конкретный вопрос. –