Question

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

这是一个例子 CODE EXAMPLE

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

您需要做的2件事 - 更改图片的z-index以使其位于您的圆形div后面，然后更改圆形div的background以使其为{{1}而不是白色。

＆＃13;

transparent

＆＃13;

.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*/
}

＆＃13;

盒子阴影内部由另一个div覆盖

1 个答案: