CSS - 我的警报具有不透明度

Question

我在CSS中创建一个警告，虽然它具有不透明度（可以通过它看到背景），即使我将不透明度设置为不透明。在我的代码中，有一个警告，但你可以通过它看到一些绿色。有没有办法让警报完全变白？谢谢！

P.S：全屏运行代码段，效果更好。

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