Javascript 具有图像的子div从父级继承不透明度 我有一个有背景图像的div 我对背景图像应用不透明度 我创建一个子div并添加文本 我不希望子div继承父div的不透明度属性

以下是我的小提琴示例： js小提琴。净/zs4pbmu2/1/

我不希望在文本后面放置背景色，如以下示例/伪解决方案中所示： js小提琴。净/Bbw7r/5/

---

请帮忙

您能像这样更改HTML结构吗：

<div id="alpha_wrapper">
  <div id="alpha_2">
  </div>
  <div id="text_holder_2">
      THIS IS MY TEXT
    </div>
</div>

这是我的文本

您有几个选择：

如果背景为白色：

• rgba（255255255,0.3）

  图像顶部渐变中使用的颜色

#alpha#u包装器{
宽度：540px；
高度：360px；
浮动：左；
位置：相对位置；
颜色：#fff；
}
#阿尔法2{
背景：线性渐变（rgba（255，255，255，0.3），rgba（255，255，255，0.3）），url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)不重复0；
宽度：540px；
高度：440px；
}
#文本保持器2{
颜色：红色；
字体大小：粗体；
字号：28pt；
位置：绝对位置；
顶部：20px；
左：20px；
宽度：500px；
}

这是我的文本

每个子项都继承父项的透明度。将父对象的不透明度设置为A，将子对象的不透明度设置为B，将显示不透明度为A*B的子对象