html - 如何动态地将图像添加到 标签

Question

我想在每个 li 菜单项下方添加一个图像，就像菜单分隔符一样。如何在 CSS 中执行此操作。当我向 ul 添加另一个 li 标签时，我希望图像能够动态呈现。

HTML代码:

<ul class="menu">
    <li>Bookmarks</li>
    <li>Something</li>
    <li>BUMPER STICKERS</li>
    <li>CARBONLESS FORMS</li>
    <li>CD JACKETS</li>
    <li>DIE CUT/CUSTOM STICKERS</li>
    <li>DOOR HANGERS</li>
    <li>ENVELOPES</li>
    <li>FOLDERS</li>
    <li>LETTERHEADS</li>
    <li>RECTANGULAR STICKERS</li>
    <li>ROUND STICKERS</li>
    <li>STATIC CLING</li>
    <li>TABLE TENTS</li>
    <li>VINYL BANNERS</li>
    <li>WINDOW STICKERS</li>
</ul>

CSS:

.seperator li {
    background-image: url(../Images/Template%20Images/Seperator.png);
    padding: 1px;
    width: 200px;
    height: 25px;
    position: absolute;
    right: 0px;
    bottom: 890px;
    background-repeat: no-repeat;
    display: run-in;
}

Answer 1

让 li 有一个背景图片，它的位置离顶部足够远，这样文本就不会与它重叠。这是放置背景图片的方法:

http://www.w3schools.com/cssref/pr_background-position.asp

只需调整元素高度以包括文本行的 x 像素加上背景图像的高度。