Question

我有以下HTML：

<div class="caller shadow-circle-lg"><img src="public/img/example-photo.png"></div>

和CSS：

.shadow-circle-lg {
    border-radius: 50%;
    -webkit-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
    -moz-box-shadow:    0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
    box-shadow:         0px 2px 2px rgba(50, 50, 50, 0.33), inset 0px 2px 2px rgba(50, 50, 50, 0.33);
    border: 8px solid white;
}

div.caller {
        z-index: 200;
}

.caller > img {
    z-index: 100;
}

为什么IMG元素仍然在div边界上呈现，即使它具有较低的z-index（是的，我已经在Chrome中检查了DOM）。

另外，有什么方法可以强制div边界半径裁剪图像？

请注意，我不想将任何课程应用于IMG本身。

由于

Answer 1

您可以通过在父元素上设置overflow: hidden;来强制裁剪边框半径（在.shadow-circle-lg中）

请注意，z-index属性仅适用于已定位的元素（例如position: absolute或position: relative。请尝试将此属性添加到<div>和{{1} } element（s）。

最终的CSS标记：

<img>

如何在父div中修复img的z-index

1 个答案: