如何让父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/。或者，您可以让孩子div inherit成为父母的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;
}