Question

我想在一个div和border-radius的圆形overflow: hidden内放置几个元素，位于fixed背景前面：

<html><head>
<style>
    .background {
        position: fixed;
        top: 0;
        width: 500px;
        height: 500px;
    }

    .rounded {
        position: relative;
        width: 400px;
        height: 400px;
        border-radius: 200px;
        -moz-border-radius: 200px;
        -webkit-border-radius: 200px;
        overflow: hidden;
    }
</style>
</head>
<body>

<div class="background" style="background-color: black;">
</div>

<div class="rounded">
    <img src="http://placekitten.com/200/200">
    <img src="http://placekitten.com/200/200" style="position: absolute; top: 200px; left: 0;">
    <img src="http://placekitten.com/200/200" style="position: absolute; top: 0; left: 200px;">
    <img src="http://placekitten.com/200/200" style="position: absolute; top: 200px; left: 200px;">
</div>
</body></html>

以下是在线示例：http://jsfiddle.net/windycrazy/kvLSh/5/。

这适用于Chrome（32），Firefox（26），Safari 6，但Safari 7和Safari Mobile上非静态定位的border-radius元素不考虑img

删除fixed背景可以解决问题，但我确实需要它。

有没有办法保留fixed和relative的{{1}}背景，absolute或img位置？

修复了Safari 7上内部元素上隐藏边框半径的背景中断

0 个答案: