具有 3 个背景的容器,绝对 div 100% 其父级高度
基本上我想制作具有 3 个半透明图像背景的容器,这样我就可以将内容放在所有这些背景上。概念是
背景#1静态尺寸
背景#2可调整大小
背景#3静态尺寸
我希望能够将内容放在所有这3个背景上以获得这样的效果。
我在想这样的事情:
<div style="position: absolute; height: auto;">
<div style="background: url('images/container.png') repeat-y; height: 100%; width: 990px; position: absolute; top: 10px;"></div>
<div style="background: url('images/containerTop.png') no-repeat; height: 10px; width: 990px; position: absolute;"></div>
<div style="background: url('images/containerBottom.png') no-repeat; height: 11px; width: 990px; position: absolute; bottom: -21px;"></div>
text<br />
text<br />
text<br />
text<br />
</div>
实际上,块的大小可以,但我不知道如何将文本放在 3 个块上,并使大小仍然可以。
Basically I want to make container with 3 semi-transparent image backgrounds, so I can put content over all of them. Concept is
Background #1 static size
Background #2 resizable size
Background #3 static size
And I want to be able to put content over all this 3 backgrounds to get such an effect.
I was thinking about something like this:
<div style="position: absolute; height: auto;">
<div style="background: url('images/container.png') repeat-y; height: 100%; width: 990px; position: absolute; top: 10px;"></div>
<div style="background: url('images/containerTop.png') no-repeat; height: 10px; width: 990px; position: absolute;"></div>
<div style="background: url('images/containerBottom.png') no-repeat; height: 11px; width: 990px; position: absolute; bottom: -21px;"></div>
text<br />
text<br />
text<br />
text<br />
</div>
In effect, block are sized ok, but I don't have idea how to put text over 3 blocks, and make size still ok.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您可以使用“float-under”方法...
在 jsFiddle 上查看它的实际效果。
HTML:
CSS:
You can use a "float-under" approach...
See it in action at jsFiddle.
HTML:
CSS:
只需将文本与背景图像放在 div 内即可。如果您不希望内容增大 div 的大小,您应该考虑使用 css,特别是“溢出”
Just put the text inside the divs with the background images. if you don't want your content to grow the size of the div, you should look at using css, specifically 'overflow'
您不需要使用position:absolute元素。你可以这样做:
并在你的CSS中:
在此处查看它的实际效果: http://jsfiddle.net/yfLSK/ 1/
you don't need to use position:absolute elements. You can do this:
and in your css:
see it in action here: http://jsfiddle.net/yfLSK/1/