AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Наложение 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>


.

© Copyright 2008-2019 by KDG



Rambler's Top100