css - 应用于子元素的不透明度

标签 css opacity

<分区>

我有以下叠加层,需要使背景淡出,但文本和按钮的完全不透明度为 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>

提前致谢!

最佳答案

我已经删除了父 div overlay 中的 opacity 并在背景样式中添加了不透明度,你可以使用 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>

关于css - 应用于子元素的不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45930033/

上一篇:css - 不同屏幕上的网页

下一篇:javascript - 为什么我的收回菜单不弹出?

相关文章:

css - 在不影响子元素的情况下设置背景图片的不透明度

javascript - jquery 宽度切换动画在动画发生期间显示垂直单元格

javascript - 请帮我把这个脚本转换成一个简单的图像 slider

javascript - 使用 css 为 <img> 旋转背景图像

CSS布局: image gallery with left-bar

jquery - Internet Explorer 和 Opera 中的不透明度问题

javascript - 每个定义的时间延迟关键帧并在动画后保持不透明度为 0

jquery - 如何使用 jQuery 在 ASP.Net CheckBoxList 控件中隐藏复选框周围的边框?

jquery - 不透明属性的 .animate() 的 IE8 问题 - 后代始终保持不透明

html - 如何在悬停 CSS 上添加图像和更改可见性