background-image: изображения и градиенты в нескольких слоях
background-image задаёт один или несколько графических слоёв фона, включая градиенты без отдельного файла.
Назначение
background-image задаёт один или несколько графических слоёв фона, включая градиенты без отдельного файла.
Как это работает
В списке через запятую первый слой расположен ближе к зрителю. Фон не имеет собственного альтернативного текста, поэтому важное содержимое изображения нужно представить другим способом.
Пример
<style>
.hero{padding:28px;background-color:#eaf4ee;background-image:linear-gradient(90deg,rgba(255,255,255,.8),transparent),linear-gradient(135deg,#cfe7da,#e8cfa8);color:#173c2e}
</style>
<div class="hero"><h2>Декоративный фон</h2><p>Содержимое остаётся обычным HTML-текстом.</p></div>Что должно получиться
Первый градиент частично осветляет второй. Никакие внешние файлы не загружаются, а смысл страницы не зависит от чтения графического слоя.
Граница применения и частая ошибка
Не помещайте единственную инструкцию или диаграмму только в CSS-фон. Для смысловой картинки обычно нужен img с уместным alt или текстовое описание рядом.
Самостоятельная проверка
Поменяйте местами два слоя и сравните перекрытие. Затем отключите background-image: основной текст и назначение блока должны оставаться понятными.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.