如何让具有半径边框的父div内的背景图像

【问题标题】：How to let a background-image inside the parent div with radius border如何让具有半径边框的父div内的背景图像
【发布时间】：2014-11-13 02:25:09
【问题描述】：

我有父 div。这个父 div 有一些边界半径。在这个 div 里面我有一个子 div。这个子 div 有一个背景图像。如何添加一些 css 样式，使背景图片在父 div 半径边框内？

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

【问题讨论】：

这将自动发生。如果为带有背景图片的 div 添加边框半径，则图片的处理方式与 div 相同。

标签： css

【解决方案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;
}

【讨论】：