制作div背景图像响应及其内容

Question

我正在尝试用HTML重新创建Minecraft的体验栏，到目前为止我设法让背景响应，但我无法让“覆盖”栏工作。当我将它设为最小高度：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