0

我有以下 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 本身应用任何类。

谢谢

4

1 回答 1

2

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

请务必注意，该z-index属性仅适用于定位元素（例如position: absolute或position: relative。尝试将此属性添加到<div>and<img>元素。

最终的 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;
    overflow: hidden; /* "crop" by hiding overflow content */
}

div.caller {
    z-index: 200;
    position: relative; /* position so z-index is recognized */
}

.caller > img {
    z-index: 100;
    position: relative; /* position so z-index is recognized */
}
于 2013-10-27T17:24:19.780 回答