修复背景图像,使其适合圆角

Question

有没有办法修复背景图像,以便它不会超出圆角的边框？ 的jsfiddle

纯CSS解决方案更可取.

代码在这里:

<style>
div {
border-radius: 30px;
background-color: #dddddd;
margin:60px;
}

a{
position: relative;
display: block;
height: 90px;
padding: 15px;
background-image: url("http://dl.dropboxusercontent.com/s/stsc2r2vqd1y6ps/lab.png");
background-position: 0 top;
background-repeat: repeat;
}
</style>
<div><a href="#">some text</a></div>

Answer 1

发生这种情况是因为您没有阻止内部内容溢出分隔符的边界.要解决此问题,只需添加overflow: hidden到您的div:

div {
    ...
    overflow: hidden;
}