④ Кроссбраузерный градиент, комбинация градиента и фонового изображения

Продолжим изучение темы CSS3 - градиент. Если пропустили прошлые статьи, то вот ссылки на них:

• ① Линейный градиент
• ② Радиальный градиент
• ③ Повтор градиента

Кроссбраузерный градиент

Для корректного отображения градиентов во всех браузерах необходимо добавить кроссбраузерную запись.

Линейный градиент

CSS

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)"; /* IE 8-9 */
background: -webkit-linear-gradient(left, red, #f06d06); /* Safari 5.1, iOS 5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background: -moz-linear-gradient(left, red, #f06d06); /* Firefox 3.6-15 */
background: -o-linear-gradient(left, red, #f06d06); /* Opera 11.1-12 */
background: linear-gradient(to right, red, #f06d06); /* Opera 15+, Chrome 25+, IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */

Повтор линейного градиента

CSS

background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1-12.0 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6-15 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Стандартный синтаксис */

Радиальный градиент

CSS

background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1-6.0 */
background: -o-radial-gradient(red, yellow, green); /* Opera 11.6-12.0 */
background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6-15 */
background: radial-gradient(red, yellow, green); /* Стандартный синтаксис */
background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Safari 5.1-6.0 */
background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Opera 11.6-12.0 */ 
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black); /* Firefox 3.6-15 */
background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /* Стандартный синтаксис */

Повтор радиального градиента

CSS

background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1-6.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6-12.0 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6-15 */
background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Стандартный синтаксис */

Комбинация градиента и фонового изображения

За счёт комбинации градиента и изображения можно создавать интересные эффекты. Для градиента нужно использовать полупрозрачные цвета, чтобы картинка оставалась видимой.

CSS

div {
  height: 453px;
  background: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, .5)), url(https://html5book.ru/wp-content/uploads/2016/12/photo-8.jpg); 
  background-size: cover;
}

Источник ↗