0

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

在此处输入图像描述

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

2 回答 2

3

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

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

于 2013-07-26T04:16:30.120 回答
1

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

html,
body {
     margin: 0;
}
于 2013-07-26T07:06:38.150 回答