html - 盒子阴影内部被另一个 div 覆盖

Question

我有一个包含内框阴影的 div，但这些阴影被另一个 div 覆盖，我尝试使用 postion:relative 但没有任何改变。

这是一个示例 代码示例

example-div{
    background:#fff;
    color:#000;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 15px;
    width:260px;
    height:250px;
    border-radius: 100%;
    border:6px solid red; 
    position: relative;
    -webkit-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    box-shadow:         inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
}

提前致谢 ！

Answer 1

你需要做的两件事 - 改变z-index你的图片，让它在你的圆形 div 后面，然后改变background你的圆形 div 让它transparent不是白色的。

.example-div{
    background: transparent; /*this way you can see behind the circle*/
    color:#000;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 15px;
    width:260px;
    height:250px;
    border-radius: 100%;
    border:6px solid red; 
    position: relative;
    -webkit-box-shadow: inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
    box-shadow:         inset 7px 7px 5px -5px rgba(50, 50, 50, 0.75);
}

.example-div img{
    width:260px;
    height:250px;
    border-radius: 100%;
    position: relative; /*needed for z-index*/
    z-index: -1; /*positions behind the circular div, but you can still see because of transparent background*/
}

<div class="example-div">
    <img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/09/new-wallpaper-18.jpg"/>
</div>