将图像叠加到CSS中的div

Question

我有以下情况：

带有“尾巴”的图像。

文本通常太长而无法适应图像，因此我希望文本流离开图像（显示全文的长度）。为了不在白色背景上看到白色文字，我需要制作与图像相同颜色的div。

查看以下小提琴 http://jsfiddle.net/ZtJc9/

<ul id="menu">
    <li>Item 1, Long description</li>
    <li>Item 3</li>
    <li>Item 1</li>
</ul>

li {
    background: url(blueImageWithTail.jpg);
    height:(imageWITHOUTtailHeight)px;
    float:left;
    background-color: blue;
    color: white;
}

问题：

如何在CSS中指出图像可以“走出”底部的div？

Answer 1

为什么不使用css3呢？这是你的小提琴的更新版本。颜色不一样，但我希望它可以帮助你。我用::before来实现这个

http://jsfiddle.net/LaJFN/12/