我想根据这张图片为我的网站创建一个样式化的 DIV 框:
我如何使用 CSS 和 HTML 来做到这一点。
我将图像分成三个不同的部分:
但是我不知道如何将它们与 Divs 一起使用来创建我的垂直可扩展框。
感谢您的帮助!
最佳答案
我假设您希望您的内容从顶部开始,但也扩展到第二个。如果是这种情况,那么您将需要在背景图像上进行一些重叠。
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. */
}
关于css - 如何从这个图像制作一个垂直可扩展的 DIV 框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4374932/