使用不透明列表后面的透明背景图像制作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 $ scope将图像路径放置到此骨架页面中，因此似乎必须在.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

所以我想出了只是与另一个div一起做。 这样做的秘诀是不要将标签放在列表下方。 放在列表上方。 否则，它将取消您的列表-使我感到困惑。

现在显而易见的另一个问题是透明背景的颜色与其周围的颜色略有不同。 看来我将不得不使用一些.PNG来代替！

 .backgroundImage { 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"> <div class="backgroundImage" style="background: url({{talkingPointsImage}}) center center;"></div> <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> </div>