Градиент средствами CSS позволяет сократить количество загружаемых изображений, что значительноувеличивает скорость загрузки страницы.
.gradient { /* Для "нормальных" браузеров */ background: #3399cc url("gradient-bg.png") repeat-x top; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; /* Для IE */ *background: #3399cc; background: #3399cc\0/; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FFaaeeff, endColorstr=#FF3399cc); } @media all and (min-width: 0px) { .gradient { /* Opera */ background: #3399cc url("gradient-bg.svg"); /* Остальные браузеры */ background-image: -moz-linear-gradient( top, #aaeeff, #3399cc ); background-image: -webkit-gradient( linear, left top, left bottom, from(#aaeeff), to(#3399cc) ); } } |
Скачайте дополнительно background: PNG, SVG
Этот метод поддерживают все нормальные браузеры.