Question

这就是我的尝试：

<div style="position: relative; margin: 0 auto; max-width: 800px; max-height: 600px; overflow-x: hidden; overflow-y: scroll; background-image: url('/design/clan_flag.gif'); background-size: 100%;">
    <img src="/design/clan_flag.gif" width="100%" style="visibility: hidden;" />
    <div style="position: absolute;">
    a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>

http://jsfiddle.net/JDbHw/

正如你所看到的，文字不能从顶部开始，因为“帮助”图像，如何在顶部？另外，如果你有足够厚的浏览器，它会显示一个水平工具栏（猜测因为内部辅助图像也是如此）

Answer 1

要在图像顶部放置带文字的div，您可以

将top:0px与position:absolute
或在父div上使用position:relative，对于两个（text / picture div）使用z-index并将文本div设置为更高{{1}}

自动拉伸div（宽度+高度）

1 个答案: