как добавить градиент над карточкой листовки?

108
6

Я пытаюсь добавить градиент над картой буклета, которая будет исчезать от белого до прозрачного и частично скрывать ее.

Использование обычного градиента с CSS в качестве фона делает градиент отображаться только при перезагрузке карты. Поэтому я попытался поставить градиент на "передний план", используя принятый ответ из этого вопроса: есть ли передний план эквивалент фонового изображения в css?

Это все еще не работает - карта все еще сидит поверх нее. Может ли кто-нибудь подумать о том, как это сделать? Благодарю.

<style>
#map-id {
height: 100%;
width: 100%;
position: absolute;
}
html,body{margin: 0; padding: 0}

#map-id:before {
position: absolute;
content: '';
height: 100%;
width: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
pointer-events: none;
}

</style>

<div id="map-id">
<script type="text/javascript" src="{% static "js/map.js" %}"></script>
</div>

спросил(а) 2021-01-25T19:11:04+03:00 4 месяца, 4 недели назад
1
Решение
89

Вы должны добавить свойство z-index в блоке before content

Код для справки: http://codepen.io/hkadyanji/pen/bwNLKK

z-index: 999; /* adding this worked for me */

Снимок экрана: enter image description here

РЕДАКТИРОВАТЬ

Добавлена реализация наложения текста.

enter image description here

ответил(а) 2021-01-25T19:11:04+03:00 4 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема