javascript - 具有重复背景的自定义突出显示文本

Question

我陷入了一种境地，无法弄清楚如何在 css 或 jQuery 中突出显示文本。我想在左边有一个图像，在右边有一个图像，然后在两者之间有一个重复的图像。有几个长词使用这个，所以我需要它尽可能动态。

我需要它看起来像什么：

谁能给我指导如何去做这样的事情？出于说明目的，我们可以将图像称为 ImgLeft.png ImgRepeat.png 和 imgRight.png

HTML 只是一个段落

<p class="HighlightedText">Attention to detail</p>

Answer 1

在 CSS 中，您可以像这样指定多个背景图像（及其相关属性）：

. HighlightedText {
    background-image: url('ImgLeft.png'), url('ImgRepeat.png'), url('ImgRight.png');
    background-position: left cneter, center center, right center;
    background-repeat: no-repeat, repeat-x, no-repeat;
}

确保图像的路径正确。您可能还需要使用 调整大小background-size。