Question

我正在尝试使用叠加渐变图像和文本创建图像。类似的东西：

<div>
<img src="url"/>
 <div background-image="other url" background-repeat:repeat-x;>
  <h2>some text</h2>
 </div>
</div>

几点说明：
*我需要两个图像在宽度和高度变化时正确缩放 *渐变img高度为96像素，宽度为1像素。

这种叠加的适当css是什么？我已尝试绝对/相对并在px中定义顶部，但在调整渐变div时，更改它的位置并且不再对齐底部。谢谢吉拉德

CSS

.main{
    text-align:center;
}

.album {    
    width: 100%;
    position: relative;
    margin: 0 auto;
}

.album-cover {
    max-width: 100%;
    display: block;
}

.album-cover-gradient {
    height: 96px;
    background-image: url('../img/text-bg.png');
    background-repeat: repeat-x;
    margin: 0 auto;
    position: absolute;
    bottom: 0;

}

Answer 1

您使用的语法不正确（background-image="other-url" background-repeat: repeat-x;）应为style="background-image: url('xxx')"; background-repeat: repeat-x;。

但是，无论如何，这应该放在外部样式表中。

尝试这样的事情：

http://jsbin.com/Odiduce/1/edit

如何创建叠加可缩放的div

1 个答案: