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

Question

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

照片：

这是我看起来的代码：

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

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

Answer 1

您可以利用CSS3 Multiple Background Images：

.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;

这是主要浏览器的所有当前版本的supported in：

Answer 2

当然你可以制作一个外部div和一个覆盖背景的内部div，这样你就可以repeat-y背景;）