0

I have the following overlay and need to have the background fade but the text and button to be full opacity of 1. I have attempted to move the styling around seeing if that would fix it. I have viewed other questions that have given answers that do not give the desired effects. Any suggestions?

<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>

Thanks in advance!

cowlthor
  • 13
  • 2

1 Answers1

0

I have removed the opacity in the parent div overlay and added the opacity just in the background style, you can use rgba so you can add opacity at the fourth place value, the format is like this background: rgba(26, 35, 126, 0.6), see below 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>
bellabelle
  • 908
  • 7
  • 13