Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс

Поиск по сайту

Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

Наложение CSS-градиента на фоновое изображение

В качестве фона можно задать одновременно градиент и изображение, указав их через запятую.

Для градиента при этом надо использовать цвета в формате rgba(), чтобы добавить прозрачность.

В этом примере белый цвет радиального градиента меняется от полной прозрачности rgba(255, 255, 255, 0) до полной непрозрачности rgba(255, 255, 255, 1).

Исходный код этого примера:

<style>
    .flower {
        width: 600px;
        height: 400px;
        background: radial-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 70%), url(flower.jpg);
    }
</style>
<div class="flower"></div>

.
Прокомментировать/Отблагодарить