响应绝对定位背景叠加

Question

我有一个背景图片我正在加载，但我想用css叠加来使它变暗。我的网站是响应式的，所以我无法弄清楚如何获得绝对定位的暗覆盖以具有响应宽度。这甚至可能吗？

这是我目前的代码。更改预览的宽度将显示暗覆盖如何停止覆盖较小宽度的图像，其中标题文本会增加横幅的整体高度。

http://jsfiddle.net/4CG32/

感谢您的任何提示/帮助！

主要css代码：

.index-panel {
   position: relative;
   background: #333 url('http://images.alphacoders.com/285/285391.jpg') no-repeat;
   background-size: cover;
   padding: 70px 0 55px;

}

 .index-panel .background {
    width: 100%;
    height: 356px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.23);
}

Answer 1

你的身高是固定的。

为什么不放：  .index-panel .background { height: 100%; }