css - 自动调整标题图片大小以适应浏览器

Question

所以这里我有一个像下面这样的标题图片

我计划将标题图像拉伸(stretch)到 100% 以获得显示器分辨率，实现此目标的最佳做法和方法是什么？我试过这样做:

.LippoHeader
{
background-image: url('../images/body/headerpng_BG.png');
background-repeat: repeat-x;
width: 100%;
height: 170px;
}
.shadowone
{
width: 100%;
position: absolute;
left: -1px;
top: 172px;
display: inline-block;
}
.shadowtwo
{
width: 100%;
position: absolute;
left: -1px;
top: 173px;
display: inline-block;
}
.shadowthree
{
width: 100%;
position: absolute;
left: -1px;
top: 176px;
display: inline-block;
}

它仍然不能拉伸(stretch)到 100% 适合显示器(它只能在图像分辨率本身允许的情况下拉伸(stretch))除非我添加:

position: absolute;

有没有办法做到这一点？如果可能的话我不想补充，我被告知不要将位置设置为绝对位置，因为这是一种不好的做法

这是标题的屏幕截图:

我还使用了母版页，所以没有 body 标签，只有 div 标签，我使用 .ascx 作为我的面板标题，我的代码是

<div class="LippoHeader">
  <div>
    <img src="images/body/shadow.png" class="shadowone" />
    <img src="images/body/shadow.png" class="shadowtwo" />
    <img src="images/body/shadow.png" class="shadowthree" />
  </div>
</div>

Answer 1

据我了解，您想拉伸(stretch)标题，而不是图像本身；图像在水平方向重复。

我将 LippoHeader 视为一个 div，它在这个 jsFiddle 中没有问题。 .但是，它并不占用监视器宽度的 100%，而是其父级宽度的 100%(在本例中为 body)。这是你的目标吗？