Html 在不更改文本的情况下，将div背景的不透明度设置为透明

如何设置div背景的不透明度而不影响英雄文本中的文本？现在

英雄文本

继承了

离子幻灯片的不透明性

<style>
.slider {
    height: 100%;
    width: 100%;
}
.slide {
    background-size: cover; 
}
#one { 
    background: url(img/walkthrough-1.png) no-repeat;
    opacity: 0.5;
}
#two {
    background: url(img/walkthrough-2.png) no-repeat;   
}
#three {
    background: url(img/walkthrough-3.png) no-repeat; 
}
.splash {
    bottom: 0px;
}
.hero-text {
}
</style>

<ion-content class="splash" scroll="false">
    <ion-slide-box on-slide-changed="slideHasChanged($index)">
        <ion-slide id="one"><div class="hero-text">Test</div></ion-slide>
    </ion-slide-box>
</ion-content>

.滑块{
身高：100%；
宽度：100%；
}
.幻灯片{
背景尺寸：封面；
}
#一{
背景：url（img/walkthrough-1.png）不重复；
不透明度：0.5；
}
#两个{
背景：url（img/walkthrough-2.png）无重复；
}
#三{
背景：url（img/walkthrough-3.png）无重复；
}
.飞溅{
底部：0px；
}
.英雄文本{
}
试验

如果您只需要调整

的不透明度，我建议您将

.hero文本

分割，并根据需要调整样式，以保持设计正确

使用CSS，您可以调整背景色的不透明度--

背景色：rgba（0,0,0,0.5）

--这将创建50%不透明的黑色背景色，并且不会影响任何子元素。但是如果你想减少背景图像的不透明性，那么你唯一的方法就是使用

不透明性
，这当然会影响孩子们

我在一个网站上使用了相同的概念，该网站也使用了“英雄图像”，我希望背景图像在不影响任何文本的情况下淡入淡出。您可能需要使用以下CSS来正确放置所有内容：

.hero-wrapper {
  position: relative;
}

.hero-wrapper > .bg {
  background: ...;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}

.hero-wrapper > .text {
  position: relative;
  z-index: 10;
}

这应该是可行的，尽管它是徒手的。如果你想让我再解释一下或者提供一个有效的例子，请告诉我。干杯~

编辑

以下是我通过Plnkr推荐的一个工作示例：）
感谢您的回复，您能提供一个工作示例吗？