0

I am creating an alert in CSS, though it has opacity (can see the background through it), even when I set the opacity to be opaque. In my code, there is an alert, though you can see some of the green through it. Is there a way to make the alert completely white? Thank you!

P.S: Run the snippet in full screen, it works better.

.alertback {
 z-index: 500;
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: black;
 opacity: .5;
 vertical-align: middle;
}
.alert {
 z-index: 1000;
 position: absolute;
 width: 500px;
 left: 31%;
 top: 30%;
}
.well {
 background-color: white;
 border: 2px solid lightgray;
 border-radius: 5px;
 padding: 20px;
}
body {
  background-color: lightgreen;
}
<div class="alertback">
 <div class="well alert">
  <p>This is an alert</p>
 </div>
</div>
Bennett
  • 1,007
  • 4
  • 15
  • 29
  • Set the opacity of `alertback` to 1 from 0.5 – m4n0 Oct 16 '15 at 04:10
  • +ManojKumar You mean from .5 to 0.5? – Bennett Oct 16 '15 at 04:10
  • Yes, both are the same. You need to move the `alert` outside `alertback` for the opacity to not have any effect on it. – m4n0 Oct 16 '15 at 04:12
  • You can also make use of `background-color: rgba(r,g,b,o)` syntax where o will effect only the background color of the div and not the opacity pf the whole element. – m4n0 Oct 16 '15 at 04:32

0 Answers0