CSS: background vs background-image

Список разделов phpBBex 1.x (поддерживается) Мастерская 1.x

Описание: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.
Модератор: Поддержка

Сообщение #1 factotum » 02.03.2013, 20:31

На досуге было лень писать свое, скопи-пастил пару строк для своего ресурса:
Код: Выделить всё
background: linear-gradient(to bottom,  #444444 0%,#111111 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0.55) 0%,rgba(0,0,0,0.55) 19%,rgba(0,0,0,0.5) 41%,rgba(0,0,0,0.45) 50%,rgba(0,0,0,0.35) 61%,rgba(0,0,0,0.05) 93%,rgba(0,0,0,0.01) 100%);
6 ноудов с заливкой выше убили IE10, периодически подвешивали Chrome.

Почему:
Использование картинок/заливок в background негативно отражается на производительности. background с картинками разрывает браузеры.

Вывод: для картинок и заливок использовать исключительно background-color, background-image

Бонус:
Код: Выделить всё
background-image: url(http://site.com/pictures.jpg);
6 строк кода убили FF, IE10 неправильно выводил заливки.
Ошибка: url без кавычек.
Вывод с кавычками: background-image: url('http://site.com/pictures.jpg');
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 12 лет 7 месяцев

Вернуться в Мастерская 1.x