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;
}

Answer 2

将背景图片应用到 div 容器中，我修改了你的jsfiddle：

div {
border-radius: 30px;
background-color: #dddddd;
background-image: url("http://www.moveoneinc.com/blog/wp-content/uploads/2011/12/Dog-2.jpg");
background-position: 0 top;
background-repeat: repeat;
margin:60px;
}

a{
position: relative;
display: block;
height: 90px;
padding: 15px;
}

你的另一张图片不起作用，所以我改了.. 编辑：有人在1秒内得到了我，我认为溢出解决方案也是有效的：）

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

2 个答案: