Возможно ли, чтобы фоновое изображение родительского элемента имело приоритет над фоновым цветом дочернего элемента?

Question

Вот упрощенный пример:

<style>
.container {
    background-image: url('https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=format%2Ccompress&cs=tinysrgb&dpr=1&w=500');
    height: 300px;
    width: 500px;
}

.child {
    // This takes precedence over background-image of the parent .container
    background-color: red;
    width: 100px;
    color: white;
}
</style>

<div class="container">
  <div class="child">
    hello
  </div>
</div>

https://codepen.io/anon/pen/pXjWOj

Красный цвет фона дочернего элемента имеет приоритет над фоновым изображением. Хотя это обычно было бы желаемым поведением, у меня есть сценарий использования, где мне нужно, чтобы фоновое изображение родителя имело приоритет.

https://codepen.io/anon/pen/VJLQzd

В этом примере у меня есть тени на родительском элементе, используя background-image, который сообщает пользователю, что есть больше элементов для прокрутки. Однако background-color дочерних элементов имеет приоритет над background-image тенью родителя.

Answer 1

Вы можете установить z-index элементов .el на -1, и вы получите желаемый эффект визуально.Это может повлиять на то, как вы хотите, чтобы ваши пользователи взаимодействовали с элементами, хотя ... Надеюсь, это поможет.

---

Демо

#container {
  display: flex;
  padding: 50px;
  border: 1px solid grey;
  width: 320px;
  overflow: scroll;
  scroll-snap-type: x mandatory;
  margin: 0 auto;
  
  
  	  background-image:
    /* Shadows */ 
    linear-gradient(to right, white, white),
    linear-gradient(to right, white, white),
/* Shadow covers */ 
    linear-gradient(to right, rgba(0,0,0,.15), rgba(255,255,255,0)),
    linear-gradient(to left, rgba(0,0,0,.15), rgba(255,255,255,0));   

  background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-size: 10px 100%, 10px 100%, 5px 100%, 5px 100%;
  background-attachment: local, local, scroll, scroll;
}

.el {
  z-index: -1;
  text-align: center;
  padding: 10px;
  margin: 5px;
  border: 1px solid grey;
  scroll-snap-align: center;
  min-width: 300px;
  background-color: aliceblue;
  background
}

html {
  background: #FFF;
}

<div id="container" class="scrollbox">
  <div class="el">Jello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
    <div class="el">Jello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
    <div class="el">Jello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
    <div class="el">Jello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
  <div class="el">Hello</div>
</div>