CSS opacity vs rgba: какой из них лучше?

Ответ 1

Как утверждали другие, rgba() и opacity работают по-другому:

• rgba() влияет на одно свойство, например color, background-color или border-color, элементов, нацеленных на CSS, и только этих элементов
• opacity влияет на все свойства (весь внешний вид) целевых элементов вместе со всеми их дочерними элементами дерева DOM.

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

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

Кроме того, многие версии Opera, включая почти текущий v12.11, создают серьезные графические сбои с некоторыми сценариями использования opacity. Смешивание непрозрачности с текстом, фоном изображения и тенями текста, а затем прокруткой страницы или div - это самый простой способ воспроизвести проблему. Аналогичная проблема возникла для меня в версии iOS версии Safari. Опять же, никаких проблем с rgba().

Это происходит по какой-то причине. С точки зрения рендеринга при использовании rgba() для color/background-color/border-color мы явно указываем браузеру, какие элементы DOM и какие графические слои элементов затронуты. Это делает намного проще для браузеров, чтобы выяснить, когда им нужно перерисовать. Кроме того, сужение области эффекта является гарантией повышения производительности, которое я подтвердил, попробовав оба варианта и заметив, что веб-сайт с использованием rgba() вместо opacity чувствовал себя более гладко, особенно в Safari и Opera.

Конечно, такие вещи, как затухающие изображения, не могут быть достигнуты, если rgba() (mask-image недостаточно поддерживается), но для задач, таких как простой прозрачный текст или фон, rgba() представляется лучшим выбором. Тем более, если вы смешиваете с анимацией CSS3.

О, и не забудьте всегда включать резервную копию при использовании rgba():

.el {
  color: rgb(0, 0, 0);
  color: rgba(0, 0, 0, 0.5);
}

Ответ 2

opacity применим только ко всем элементам, поэтому вы не можете применить альфа-канал к цвету с помощью свойства opacity. Вы можете сделать это только с помощью функции rgba() (или hsla()).

Итак, rgba()/hsla() лучше во всех аспектах, потому что это единственный способ сделать это.

Ответ 3

Сначала вы должны знать, что rgb() является кросс-браузером, но выбор прозрачности между rgba() и opacity() зависит от вашего случая, если у вас есть разделение с дочерними элементами дерева DOM, и вы не хотите делать прозрачными его детям лучше выбрать rgba(), но если это одиночное разделение, я предпочитаю использовать opacity().

Поскольку браузеры используют Hardware Acceleration для рендеринга opacity(). filter: alfa(opacity=x) совпадает с opacity(), но для IE8 и более ранних версий.

rgba() - это функция, которая заставляет браузеры вычислять цвет, но не использовать ускорение GPU, и если вы часто используете rgba() на странице, возможно, ваш браузер работает довольно медленно. Если вы используете простой цвет, я предпочитаю использовать шестнадцатеричный цвет, потому что это предварительно рассчитанный цвет, а браузеры не вычисляют и просто рисуют его.

В конце концов, если ваш случай вызовет вас использовать rgba(), но вы хотите ускорить GPU, вы можете использовать transform: translateZ(0);, ничего не произойдет, но ваш браузер заставит использовать графический процессор. это трюк для лучшей производительности, но не используйте его часто.

Примечание: клавиша transparent для цветовых карт в rgba (0,0,0,0). это просто ключ, а не точное значение.