背景图片上的边框半径

Question

能否在 background-image 上添加 border-radius？

- Michał Urban

---

一个 div 的背景图像，实际页面的背景图像...？你是什么意思？需要更多信息。 - Bart

这个问题怎么可能被点赞两次？它的质量非常差。你尝试过什么了吗？你试过在谷歌上搜索吗？你对“background-image”的定义是什么？因为正如@Bart已经提到的，它是你的body、一个随机的div或者甚至是一个pre元素的背景？请更具体一些。 - Jelmer

1. div的背景图片
2. 我不想通过在div上设置border-radius来裁剪背景图片，因为我的背景图片位于中间并且不与div边框接触，所以背景图片不会被裁剪。

- Michał Urban

Answer 1

是的，这是可能的：

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

点击此处查看演示。

- David Czinege

---

这很好，但如果我添加了background-position: 50px background-repeat: no-repeat，背景图像仅会被 div 的边框裁剪。 - Michał Urban

我认为没有直接将 border-radius 添加到 background-image 的方法，但您可以使用一个小技巧：http：//jsfiddle.net/fbDZb/8/ - David Czinege

David Czinege，谢谢，不幸的是我在寻找解决方案时没有使用额外的div。无论如何还是谢谢 :-) - Michał Urban

有人在使用 SVG 作为背景时遇到问题吗？如果我设置了 background-size: cover;，则图像的显示会出现问题。 - Andrew Brown

不，这是不可能的 - 应该是一个有效的答案。如果包含的图像比周围的框小，则上面的示例将无法工作。一个潜在的解决方法可以使用例如 background-size: cover 或类似的方式来完成。 - lubosdz

Answer 2

试试这个

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

- Nandu

---

对于跨浏览器兼容，您需要使用“-moz-border-radius: 50px;”；如果您需要优化旧版IE的话，则无法避免使用像“pie.htc”这样的外部脚本 [链接]（http://css3pie.com/）。 - Holger D. Schauf