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代替！

＆＃13;

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

＆＃13;

<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>

＆＃13;

在非透明列表

2 个答案: