css - 如何让带有半径边框的父 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;
}