如何修復的z-index在父DIV的img

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元素仍呈現在格邊境，甚至儘管它的z索引較低（是的，我已經在Chrome中檢查了DOM）。

另外，有沒有什麼辦法可以強制div邊框半徑裁剪圖像？

請注意，我不想將任何類應用到IMG本身。

感謝

Answer 1

您可以強制圓角半徑由（在.shadow-circle-lg）的父元素設置overflow: hidden;裁剪

需要注意的是z-index財產僅適用於定位的元素（如position: absolute或position: relative是非常重要的。嘗試添加該屬性的<div>和<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 */ 
}