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

Question

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

我计划将标题图像拉伸到 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;
}

除非我添加：

位置：绝对；

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

这是标题的屏幕截图：

我也使用了母版页，所以没有正文标记，只有 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

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

我把LippoHeader它当作一个 div ，它在这个jsFiddle中没有问题。但是，它不会占用显示器宽度的 100%，而是占用其父级宽度的 100%（在本例中为body）。这是你的目标吗？

Answer 2

由于您想要重复图像并div占据浏览器窗口的整个宽度而不是实际的单个图像，因此您需要确保htmlorbody标记上没有边距。查看提供的 jsFiddle 您将要删除边距。

html,
body {
     margin: 0;
}