背景图像上的边框半径[关闭]答案

【问题标题】：Border-radius on background-image [closed]背景图像上的边框半径[关闭]
【发布时间】：2012-12-30 11:57:51
【问题描述】：

是否可以在background-image 上添加border-radius ？

【问题讨论】：

div的背景图片，实际页面的背景图片..？你的意思是？需要更多信息。
这个问题怎么可能被投票两次？它的质量很差。你有没有尝试过什么？你试过谷歌吗？你对“背景图像”的定义是什么，因为正如@Bart 已经提到的，它是你的body、随机div 或者甚至是pre 元素的背景？请更具体。
1. div 2 的背景图像。我不想通过设置在 div 上的边框半径来裁剪背景图像，因为我的背景图像位于中间并且不与 div 边框接触，因此不会裁剪背景图像。

【解决方案1】：

试试这个

    div {
        border: 10px solid white;
       -moz-border-radius: 10px;
       background:url(map_background_box_right.png);
        }

【讨论】：

对于跨浏览器你需要 -moz-border-radius: 50px;如果你必须优化旧的ie，你不能没有像pie.htc这样的外部脚本link

【解决方案2】：

是的，有可能：

div {
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  border: none;
  width: 500px;
  height: 335px;
  background: url(http://themescompany.com/wp-content/uploads/2012/02/6402.jpg);
}

Click here for demo.

【讨论】：

这很好，但如果我要添加background-position: 50px background-repeat: no-repeat 会怎样。背景图像仅被 div 的边框裁剪。
我认为没有办法将边框半径直接添加到背景图像中，但您可以通过作弊来做到这一点：jsfiddle.net/fbDZb/8
David Czinege，谢谢，不幸的是我在寻找没有额外 div 的解决方案。无论如何谢谢:-)
有没有人在使用 SVG 作为背景时遇到过任何问题？如果我有它background-size:cover; 图像的显示是混乱的
不，这是不可能的——应该是一个有效的答案。如果包含的图像小于周围的框，则上面的示例将不起作用。一个潜在的解决方法可以用例如来完成。 background-size: cover 或类似的。