在div的顶部和底部显示背景？#multiple background-position

Question

我需要让这个小的灰色矩形(红色圆圈)显示在一个div的顶部n底部,它包含缩略图(顺便说一下这个div可能还有2或3行缩略图)

图片:

2x边界？

这是我看起来如何的代码:

.jq_thumbnails {
    background: url("/site_media/static/coffee_small_top.png") top left no-repeat;
    overflow: auto;
    height: 100%;
}

是否有可能轻松实现这一效果？我想制作ifequal标签来检查缩略图列表的长度并相应地使用某个背景图片,但也许只有使用html/css才能实现这个目的？

Answer 1

.jq_thumbnails {
    background-image: url(../images/bg-top.png), url(../images/bg-bottom.png);
    background-position: 0 0, 0 bottom;
}

设置background-repeat属性以适合您的特定方案:

background-repeat: repeat-x, repeat-x;

主流浏览器的所有当前版本都支持此功能: