如何讓半徑邊界父div中的背景圖像

Question

我有父div。這個父div有一些邊界半徑。在這個div裏面我有一個小孩div。這個孩子div有一個背景圖像。如何添加一些CSS樣式，所以背景圖像將在父div半徑邊界內？

<div class="zc-normalradius zc-bgcolor-normal singleLink"> 
      <div id="singleLinkPicture" class="singleLinkPicture" /> 
</div> 

Answer 1

您可以添加overflow: hidden父div：http://jsfiddle.net/b4Ld4fg6/。或者，您可以讓孩子的父母divinheritborder-radius。

HTML：

<div> 
    <div></div> 
</div> 

CSS：

body > div { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #000; 
    border-radius: 100%; 
    overflow: hidden; 
} 

div > div { 
    height: 100%; 
    background: url(http://placehold.it/1000x1000) 
       no-repeat 
       center center/cover; 
}