如何从此图像制作可垂直扩展的DIV框?
我想从这个图像创建一个风格DIV盒子,我的网站: 如何从此图像制作可垂直扩展的DIV框?
我怎样才能做到这一点使用CSS和HTML。
我砍了图像在三个不同的部分:
但是我不知道如何使用它们与Divs创造我的垂直消耗箱。
感谢您的帮助!
试试这个: HTML:
<div class="container">
<div class="top"></div>
<div class="middle">content here content here content here</div>
<div class="bottom"></div>
</div>
CSS:
.container { width: 300px; }
.top { padding-top: 15px; background: url(topimage.png); }
.middle { background: url(middleimage.png); }
.bottom { padding-bottom: 15px; background: url(bottomimage.png); }
调整垫衬的CSS,使它们符合您topimage和底图的高度和容器的宽度,使它匹配图像的宽度。
使用三个独立的div,并将中间的顶部填充设置为顶部的顶部填充高度。所以:
#top-div {
height: 25px;
background-image: url(bg-top.jpg);
}
#middle-div {
background-image: url(bg-middle.jpg);
padding-top: -25px;
}
#bottom-div {
background-image: url(bg-bottom.jpg);
}
我假设你希望你的前一个内启动,但扩展到第二个为好。如果是这种情况,那么你需要在背景图像上重叠一些。
HTML
<div class="expandable">
<div class="content top">content goes here</div>
<div class="bottom"></div>
</div>
CSS
.expandable{
background:url('middle-image.jpg') 0 0 repeat-x;
}
.top{
background:url('top-image.jpg') 0 0 no-repeat;
height:auto!important;
height:100px;/* whatever the height of the top (big) area is */
min-height:100px; /* whatever the height of the top (big) area is */
}
.bottom{
background:url('bottom-image.jpg') 0 0 no-repeat;
height:10px; /* whatever the height of the bottom image is. */
}
谢谢,这是最好的非CSS3的例子!不过,我会尝试使用PIE的CSS3。 – benjisail 2010-12-07 10:17:18
@benjisail,你可以选择最适合你的情况,最适合将来的维护。 Css3pie似乎是这种情况;) – 2010-12-07 10:32:35
谢谢,我不得不通过添加min-height:98px和.top的不重复来修改它。然而,使用这个解决方案,我该如何开始在框的顶部写文本而不是98px? – benjisail 2010-12-07 09:23:25