如何在div上设置不透明度并且不影响div内的图像

Question

如何在div上设置不透明度并且不影响div内的图像

.prof_pic_div{
width: 300px;
height: 300px;
float: left;
background: black;
opacity:0.7;
position: relative;
overflow: hidden;
}
.prof_pic{
  width:100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="prof_pic_div">
		
		 <?php
			$con = mysqli_connect("fdb26.freehostingeu.com","2961865_soulbase","trosiukas88","2961865_soulbase");
			$q = mysqli_query($con,"SELECT image FROM users WHERE username = '".$_SESSION['username']."'");
			while($row = mysqli_fetch_assoc($q)){
				echo $row['username'];
				if($row['image'] == ""){
					echo "<img class='prof_pic' src='pictures/default.jpg' alt='Default Profile Pic'>";
				} else {
					echo "<img class='prof_pic' src='pictures/".$row['image']."' alt='Profile Pic'>";
				}
				echo "<br>";
			}
		?>

</div>

如何在div上设置不透明度并且不影响div内的图像。 我尝试使用z-index，但无济于事