반지름 테두리가있는 부모 div 내부에 배경 이미지를 넣는 방법

Question

부모 div가 있습니다. 이 부모 div에는 경계선 반경이 있습니다. 이 div 안에는 자식 div가 있습니다. 이 하위 div에는 배경 이미지가 있습니다. 배경 이미지가 부모 div 반지름 테두리 안에 있도록 일부 CSS 스타일을 추가하는 방법은 무엇입니까?

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

Answer 1

당신은 부모 div에 overflow: hidden를 추가 할 수 있습니다 http://jsfiddle.net/b4Ld4fg6/. 또는 자녀를 divinherit 부모의 border-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; 
}