html - 将图像叠加到CSS中的div

我有以下情况:

enter image description here

带有“尾部”的图像。

通常文本太长而无法容纳图像，所以我想让文本远离图像(显示全文的长度)。为了看不到白色背景上的白色文字，我需要制作与图像颜色相同的 div。

看看下面的fiddle 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？

最佳答案

为什么不使用 css3 呢？这是你的 fiddle 的更新版本。颜色不一样，但我希望它能帮助你。我使用 ::before 来实现这一点

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

关于html - 将图像叠加到CSS中的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24823036/