`背景大小：封面`填充边框

Question

有没有办法在填补边界后面的区域时实现background-size:cover的效果。为了更好地说明这一点，请看下面的图片：左侧图片正在使用background-size:cover并整齐地填满整个框本身无论图像是纵向还是横向，但隐藏在半透明的顶部和底部边框后面。第二个图像是使用background-size: auto 260px规则创建的，它可以提供我想要的效果，但是只有这样才有效，因为我知道这种情况下的背景是横向（并且框本身是200px和边框30px）。

用于呈现上述两个框的JSFiddle可以是found。我很难相信纯css是不可能的，但即使是基于javascript的解决方案也是开放的（尽管我可以构建一个hackish Javascript解决方案，我不知道如何使看起来相对干净......）。仍然希望有一种CSS方法可以做到这一点。

Answer 1

这可以通过将background-origin属性设置为border-box：

来实现

#one{
    background-size:cover;
    background-origin: border-box;
}

fiddle

还有一个background-clip属性，听起来应该这样做，但是没有 - 因为默认情况下背景在边框下延伸，问题就是为什么background-size:cover/contain/%没有考虑到边界。我认为向后兼容性。