Question

.holderDiv{
	position: relative;
}
.shadowSimulation{
	position: absolute;
	background-color: black;
	height: 60%;
	width: 611px;
	bottom: -10px;
	left: -10px;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<div class="holderDiv">
		<img class="confidentalMainImage" src="http://i.imgur.com/SoHn5gF.jpg">
		<div class="shadowSimulation"></div>
	</div>
</body>
</html>

我附上了我需要的图像。在代码示例中，我尝试了z-index，但仍然没有结果。我需要让黑色部分回到图像。就是这样。

Answer 1

我自己找到了答案，解决方法是将position: relative提供给图片，然后提高z-index:。

Answer 2

您是否尝试将阴影直接添加到图像或包含它的div？

由于不同的网络浏览器存在问题，这可能是更好的解决方案。

以下是带有修改示例的 codepen ，以及下面的代码，希望有所帮助

的CSS：

.holderDiv {
    position: relative;
    margin-left: 30px;
    margin-bottom: 30px;
    width: 611px;
    box-shadow: -20px 20px 0 Gray;
}

两个元素相互定位

2 个答案: