Question

因为我遇到了CSS相关的问题，但是我在这里。总而言之，我希望使用渐变背景突出显示文本，我已设法使用<span>标记并在其上设置背景图像。问题是，当文本转到新行时，它开始变得有点冒险并且中断。

我已经设法解决了这个问题，但HTML非常糟糕，我不喜欢将HTML代码作为规则用于妥协。

描述这个的最好方法就是告诉你。

http://jsfiddle.net/sambeckhamdesign/2HSqh/11/

顶部<li>是具有破碎风格的优秀HTML，而<li>是它应该看起来的样子，但HTML标记很糟糕。

任何解决方案显然都很感激。不介意使用Javascript或jQuery，但如果可以的话，我会在CSS中进行。

Ta宠物：）

Answer 1

我可以为你提供仅适用于 firefox 和 safari

的css hacks

::selection {
    background: #ffb7b7; /* Safari */
}

::-moz-selection {
    background: #ffb7b7; /* Firefox */
}

参考：

http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques

希望这有帮助：）

Answer 2

我能想到的唯一方法（不需要额外的标记）就是使用具有正确高度的重复背景图像。如果您的行高不变，这应该可以正常且快速地工作。所有其他方法都可能非常缓慢或笨重。

Answer 3

我最终可以做到这一点的最好方法是使用<span>标记。我讨厌这样做，并尽可能避免它，但在这种情况下需要使用它。请参阅问题中更新的JS小提琴，了解我是如何做到的。

Answer 4

也许这提供了你想要的东西

ul#container li.hilight {
    padding:3px 20px;
    background:url('http://www.sambeckhamdesign.com/_images/rain_1.jpg') left repeat-y #c06;
    line-height:30px;
    color:#fff;
}

和

<li class="hilight">
        This is how the text should look
    <br />
        but the HTML markup is messy
</li>

css文字突出显示

4 个答案:

http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques