使用 :after/:before 假图像调整背景图像的大小

Question

我已经在我的 ：after 伪中使我的背景图像响应，但无法控制高度响应能力，所以我最终在图像底部有一个大的空白区域。

我的 CSS：

.element:after {
    content:'';
    background:url('http://i57.tinypic.com/4kdytv.png') no-repeat;
    background-size:100%;
    height:284px;
    display:block;
}

小提琴：http://jsfiddle.net/w6amht6o/

我见过其他几个类似的问题，但没有一个讨论使高度响应。 我看到你可以尝试类似"背景宽度：100% 100%;"的东西，但这对我不起作用。

让我知道我做错了什么！

Answer 1

在 CSS 中没有background-width这样的东西。您正在考虑background-size，它应该完全按照您的描述进行操作。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size