Тень поверх фонового изображения CSS

237

13 июля 2019, 18:50

Доброе время суток всем. Вопрос такой - как сделать тень поверх фонового изображения другого элемента? Есть элемент, у которого есть тень box-shadow, есть следом идущий элемент, у которого есть фоновое изображение.

Если убрать фоновое изображение, то тень на месте. Но если поставить изображение, то элементы встают впритык друг к другу и тени нет. Манипуляции с z-index никак не помогли.

Answer 1

Добавьте вашему ul position: relative;

HTML:

<body>
<nav>
  <ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  </ul>
</nav>
<section>
</section>
</body>

CSS:

*{
  margin: 0;
  padding: 0;
}
nav ul {
  list-style: none;
  box-shadow: 0 5px 7px rgba(0,0,0,0.2);
  position: relative;
}
nav li {
  display: inline-block
}
section {
  background: url(https://cdn1.flamp.ru/44ce838b5b368a43069f1fae67f97b3b.jpg) center;
  height: 300px;
}

P.S. код по Вашему примеру.