背景图片的大小是否包括边框？

Question

当为

元素设置背景图片时，边框会影响所需的图片尺寸吗？

我正在开发一个适用于Retina iPhone的项目，其中一个元素宽度为100%。我的背景图片宽度为640像素，我使用了background-size属性来在Retina显示屏上获得良好的显示效果。

如果在

元素上使用边框，是否需要减小图片尺寸以获得“完美”的显示效果？

例如：

320px(div) - 4px(2px border left and right) = 316px

所以我的图片应该是632像素（2x316）才能获得1:2的“完美”像素比。

- Brian Masters

Answer 1

背景图像显示在边框的限制范围内，也就是说，边框不包括在背景显示的空间中（但会显示在填充区域上）。

对于您的特定情况，使用background-size: cover可能会有所帮助（MDN reference）？

- Barney

---

你可以使用 background-origin 属性来控制这个。例如，如果你将它设置为 border-box，那么大小和位置将考虑到边框。（这也会影响到 background-size: cover 的效果。）初始值是 padding-box，与你的描述相对应。 - BoltClock