Question

我的代码就像这样

<body style="background: url('im.jpeg')">
<div class="inner" style="opacity:0.5;margin-left:20px">
  <div class="innermost">
  <p>My content</p>
  </div>
</div>   
</body>

我的代码的问题在于它的主体有一个图像，因此它将在全屏幕上，而“最里面的”类具有包括图片和文本的原始内容，不透明度被分配给“内部”类。而这种不透明性会影响“最内层”的所有元素。是否有任何解决方案可以防止“最内层”类的不透明度而不影响体型。谢谢你的阅读。

更新

我的代码还有其他选择，这样我就可以全屏显示图像。

Answer 1

这不会以你想要的方式发生。如果最里面是内部，它是其内容的一部分，也将是透明的。根据您想要实现的目标，您可以申请替代方案。例如，透明背景。或者从内部移除最里面，并使用绝对位置：

<div style="position:relative;margin-left:20px">
    <div class="inner" style="opacity:0.5;">

    </div>
    <div class="innermost" style="position:absolute; left:0; top:0;">
        <p>My content</p>
    </div>
</div>

Answer 2

我认为你可以尝试为你的班级“最里面”添加css属性“style：none”。这样做，你“停止”下面指定的不透明度。

Answer 3

如果父元素的不透明度值设置为0.5，则其所有子元素都将继承该不透明度设置，并且无法在子元素上反转该不透明度。阅读此http://www.impressivewebs.com/fixing-parent-child-opacity/

当图像在身体上时，Css内部div没有不透明度

3 个答案: