要在li标签下方移动的背景图像

Question

在上图中，我以气泡格式显示新闻项目。这些都在列表中，如下所示：

<ul>
    <li>
        <h2>South West Training Association</h2>
        <p>South West Training Association to get online makeover ....</p>
        <a href="#"><img src="images/readmore.jpg" alt="Read More" width="72" height="22" border="0" /></a>
    </li>
</ul>

ul{ list-style-type:none;}
ul h2{color:#01558a; text-decoration:none; font-size:90%; font-weight:bold; font-style:normal;}
ul p{font-size:.7em; font-style:italic; line-height:1.1em; padding:4px 0; margin:0;}
ul li{background:#f8f5d4 url(../images/news-li-bottom.jpg) no-repeat left bottom; border:#ebe6b3 2px solid; padding:8px; -moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;behavior: url(border-radius.htc); margin:0 0 20px 0; display:block;}

CSS为新闻项生成一个圆角框。我想在列表项背景中提到下面的箭头。现在我想把它移到底部以下20px。我怎么能这样做？

Answer 1

你可以这样做：

ul li:after {
    content: url(lien vers ton image);
    position: absolute;
}

然后使用bottom：and left：pour positionner ton image au bonne endroit。

它在所有浏览器中都不起作用。为了确保你应该在你的li中添加一个跨度，将背景放在它的位置上。