我正在尝试让我的侧边栏使用3种不同的背景。屏幕截图:http://i.imgur.com/b0ZodFz.jpg
我尝试用3个容器修复它,但我无法正确处理(顶部图像消失等)。关于如何做到这一点的最佳方法的任何建议都会很棒。
HTML
<div class="footer">
<div class="head">
<div class="block">
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
Test<br/>
</div>
</div>
</div>
CSS
.footer {
background: url(http: //i.imgur.com/NNtfaL6.png) bottom left no-repeat;
width: 190px;
margin-left: 20px;
}
.head {
background: url(http: //i.imgur.com/sOVew68.png) top left no-repeat;
width: 260px;
}
.block {
background: #1b1b1b;
color: #fff;
width: 175px;
margin-left: 80px;
}
答案 0 :(得分:0)
而不是使用2个小图像并用背景颜色填充其余图像,它更简单到make the top image taller than needed,并在底部使用相同的小图像。因为图像是PNG格式,所以使顶部图像非常高,对图像的大小增加很少(因为添加的部分只是2种不同颜色的块,在PNG图像中非常有效地压缩)。 p>
这种使用比需要的图像大得多的图像称为“滑动门”。通常,它可以水平应用于样式可变宽度内容,但也可以垂直使用,就像在这种情况下一样,可以设置可变高度内容的样式。
Updated Demo(如果在JSFiddle中运行它有任何问题,这里是演示的standalone version)
<强> HTML 强>
<div class="outer">
<div class="inner">
Test<br/>Test<br/>Test<br/>Test<br/>
Test<br/>Test<br/>Test<br/>Test<br/>
Test<br/>Test<br/>Test<br/>Test<br/>
</div>
</div>
<强> CSS 强>
.outer {
/* Short bottom image */
background: url(http://i.imgur.com/q3Y9q16.png) 70px bottom no-repeat;
width: 266px;
padding-bottom: 36px; /* Same as height of short bottom image */
}
.inner {
/* Tall top image */
background: url(http://i.imgur.com/xxRw8zW.png) 0px top no-repeat;
color: #fff;
padding: 74px 10px 20px 90px;
}