Градиентный фон-изображение на существующем фоновом изображении - PullRequest
Новая
       46

Градиентный фон-изображение на существующем фоновом изображении

0 голосов
/ 15 мая 2018

Можно ли сделать часть градиента изображения на существующем фоне?

https://i.stack.imgur.com/RPCrY.jpg

1 Ответ

0 голосов
/ 15 мая 2018

Результат, как в добавленном примере изображения, может быть достигнут с помощью 2-х контейнеров, один с фоновым изображением, другой (который находится сверху первого) использует CSS градиентный фон, где один из цветов градиента имеет альфа 0 (т.е. прозрачный).

Для получения дополнительной информации о CSS-градиентах см .: https://developer.mozilla.org/nl/docs/Web/CSS/CSS_Images/Using_CSS_gradients

чтобы сделать градиент прозрачным с одной стороны, используйте цвет rgba, например: 

#grad1 {
    height: 200px; width:500px;
    background: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)); 
}

Значение a в rgba означает альфа, это прозрачность, значение которой находится в диапазоне от 1 (непрозрачный) до 0 (прозрачный)

...