html - 如何用三分之一的圆部分覆盖一个圆？

Question

我想要一个图片圈，下半部分有标签，有背景。我想我发布了一个 jsfiddle，以便您可以理解我想要什么:http://jsfiddle.net/Lf65Z/

所以这是我的 CSS:

#container {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 400px;
    height: 400px;
    background: red;
    border: 1px solid #999;
    border-radius: 1000px;
}

#labelbackground {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 400px;
    height: 200px;
    background: rgba(165, 165, 165, 0.62);
    border-bottom-left-radius: 1000px;
    border-bottom-right-radius: 1000px;
}

这为我提供了 50% 圆圈的背景。但我只想覆盖大约 33% 的圆圈，如下所示:http://jsfiddle.net/Lf65Z/1/

#labelbackground {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 400px;
    height: 150px;
    background: rgba(165, 165, 165, 0.62);
    border-bottom-left-radius: 1000px;
    border-bottom-right-radius: 1000px;
}

但如您所见，它并没有真正按照我的意愿行事...是否有可能只切断 50% 的背景，以使其保持正确的边界半径？

Answer 1

只需将 overflow: hidden; 添加到容器中。看这里:http://jsfiddle.net/deVRd/

编辑:对于带有 slider 的情况，您可以使用渐变。参见 http://jsfiddle.net/C7mc7/ .阅读有关 CSS3 渐变的更多信息 here并轻松创建您自己的 here .