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/

修改：对于带滑块的情况，您可以使用渐变。见http://jsfiddle.net/C7mc7/。阅读有关CSS3渐变here的更多信息，轻松创建自己的here。

如何用圆圈的三分之一部分覆盖圆圈？

1 个答案: