1

我目前正在尝试让我的侧边栏使用 3 种不同的背景。截屏

我试图用 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;
}
4

1 回答 1

0

滑行门

与其使用 2 个小图像并用背景颜色填充其余图像，不如让顶部图像比需要的高，并在底部使用相同的小图像更简单。因为图像是 PNG 格式，所以使顶部图像非常高不会增加图像的大小（因为要添加的部分只是 2 种不同颜色的块，在 PNG 图像中压缩非常有效）。

这种使用比需要大得多的图像的方法称为“滑动门”。通常，它水平应用于样式可变宽度内容，但也可以垂直使用，如在本例中，样式可变高度内容。

更新了演示   （如果在 JSFiddle 中运行它有任何问题，这里是演示的独立版本）

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;
}
于 2013-05-11T19:59:10.220 回答