html - 使 div 背景图像响应及其内容

Question

我正在尝试用 HTML 重新创建 Minecraft 的体验栏，到目前为止我设法让背景响应，但我无法让“覆盖”栏工作。当我将它设置为 min-height: 100% 而不是 15px 时，它根本不显示。

.xpbar {
  width: 0%;
  height: 15px; /* works */
  /* min-height: 100%; doesn't work */
  background-image: url(http://i.imgur.com/4esnIWF.png);
  background-repeat: no-repeat;
  background-size: cover;
}

这是我目前所拥有的:

http://jsfiddle.net/zLwds/2/

重新调整窗口大小以查看问题!

TL;DR 如何让第二张图片也响应式？

Answer 1

试试这个:

background-size: 100% 100%;

这就是您要实现的目标吗？

jsFiddle here