我想要一个在下半部分有背景标签的图片圈。我想我发布一个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%的背景,以便它保持正确的边界半径?
答案 0 :(得分:5)
只需将overflow: hidden;
添加到容器中即可。见这里:http://jsfiddle.net/deVRd/
修改强>: 对于带滑块的情况,您可以使用渐变。见http://jsfiddle.net/C7mc7/。阅读有关CSS3渐变here的更多信息,轻松创建自己的here。