Question

我有以下叠加层，需要让背景淡入淡出，但文字和按钮的完全不透明度为1.我试图移动样式，看看是否会修复它。我已经查看了其他问题，这些问题已经给出了没有产生预期效果的答案。有什么建议吗？

<div id="myNav" class="overlay" style="z-index:0.1; background: rgb(26, 35, 126) ; opacity: 0.6;">
<div class="w3-container w3-padding-32" style="width:100%;height:100%;margin-top: 0px;margin-bottom: 0px;
text-align: center;">
<h1 style="color: black;">Thank you for visiting our website!</h1>
<button>Continue to our website</button>
</div>
</div>

提前致谢！

Answer 1

我删除了父div opacity中的overlay并仅在背景样式中添加了不透明度，您可以使用rgba，这样您就可以在第四位添加不透明度值，格式如下background: rgba(26, 35, 126, 0.6)，请参见下面的html

HTML

<div id="myNav" class="overlay" style="z-index:0.1;background: rgba(26, 35, 126, 0.6);">
<div class="w3-container w3-padding-32" style="width:100%;height:100%;margin-top: 0px;margin-bottom: 0px;
text-align: center;">
<h1 style="color: black;">Thank you for visiting our website!</h1>
<button>Continue to our website</button>
</div>
</div>

儿童元素采用不透明度

1 个答案: