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

时间:2013-12-05 23:52:58

标签: html css responsive-design

我正在尝试用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如何使第二张图像响应?

1 个答案:

答案 0 :(得分:1)

试试这个:

background-size: 100% 100%;

这是你想要实现的目标吗?

jsFiddle here