我正在尝试向父对象添加阴影,其中子<img>
元素位于其中。我希望嵌入阴影与图像重叠。
我的 HTML 代码是:
<section class="highlights">
<img src="images/hero.jpg" alt="" />
</section><!-- End section.highlights -->
和 CSS:
.highlights {
height: 360px;
padding: 0;
position: relative;
overflow: hidden;
opacity: 0.9;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:1;
}
.highlights img {
height: auto;
width: 100%;
margin: 0 auto;
display: block;
position: relative;
}
.highlights {
-webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
影子没有出现在我面前。我做错了什么?