Создание div с прозрачным фоновым изображением за непрозрачным списком

Question

Как создать div, который имеет фоновое изображение за списком, чтобы сам список не стал прозрачным?

Я стараюсь это как это прямо сейчас:

<div class="talking-points" style="background: url({{talkingPointsImage}}); background-size: 100%; opacity: 0.05; 0 0"> 
    <h2>{{title}}</h2> 
    <ul> 
     <li ng-repeat="issue in subCategories" style="list-style-type:none; opacity: 1;"> 
      <input type="radio" name="radio" ng-model="question.stance" ng-value="-1"> {{issue.issue}} 
     </li> 
    </ul> 
</div> 

Прямо сейчас, его делает всю вещь прозрачным. Одна из проблем заключается в том, что я использую область Angular $ для размещения пути изображения на этой странице скелета, поэтому кажется, что это должно быть объявлено в .html, чтобы Angular забирал его.

Answer 1

я обычно делаю это с помощью before или after

li { 
    background: transparent; 
    position: relative 
} 

li:after { 
    content: ''; 
    position: absolute; 
    background-image: url('YourBGImage.jpg'); 
    height: 100%; 
    width: 100%; 
    left: 0; 
    top: 0 
} 

Answer 2

Так что я понял, это просто сделать это с другими делами. Секрет этого не помещает тег под список. Просто поставьте над списком. В противном случае он отменит ваш список - смутил меня.

Еще одна проблема, которая теперь очевидна, цвет прозрачного фона немного отличается от того, что вокруг него. Похоже, мне придется использовать некоторые .PNG вместо этого!

.backgroundImage { 
 
\t position: absolute; 
 
    z-index: -1; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    opacity: .4; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="main"> 
 

 
<div class="talking-points"> 
 
\t <div class="backgroundImage" style="background: url({{talkingPointsImage}}) center center;"></div> 
 

 
\t <h2>{{title}}</h2> 
 
\t <ul> 
 
\t  <li ng-repeat="issue in subCategories" style="list-style-type:none; opacity: 1;"> 
 
\t   <input type="radio" name="radio" ng-model="question.stance" ng-value="-1"> {{issue.issue}} 
 
\t  </li> 
 
\t </ul> 
 
\t 
 

 
</div> 
 
</div>