html - 如何在 HTML 中用多种颜色突出显示文本的不同部分

Question

假设我们有一段文本，我们想用不同的颜色突出显示文本的不同部分，如下所示：

突出显示可以包括文本跨度之间的潜在重叠，如上例所示。我只是想知道我需要使用/利用什么样的技术来实现这一目标？我是否应该围绕 CSS 和 HTML 来了解如何在我的 HTML 中定义一个类span或mark标签？或者是否有任何免费且准备就绪的东西，以便我可以使用适当的标签生成我的文本并将其放入我的 HTML 以生成彩色文本？

我的模板在HTML5.

标签： htmlcsshighlight

Answer 1

这是一个看似简单但事实证明并非微不足道的问题。您不能尝试部分重叠元素，因为它们会与一个完全包含在另一个中的元素级联。以下不突出以紫色开头的句子，以紫色和绿色为中间，以绿色结尾的句子。相反，它用紫色突出整个句子，用绿色突出中间部分。

<span class="purple">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="green">sed do eiusmod tempor incididunt ut</span> labore et dolore magna aliqua.</span>

虽然定位可用于将适当大小的高光放置在它们重叠的位置，但这是一种难以做出响应的方法。

相反，我通过完全封闭另一个突出显示标签来实现这种外观，其中两个突出显示重叠，然后在前一个突出显示之后立即开始另一个突出显示。

因为你想要的外观有圆角，应该只出现在突出显示的开始和结束处，所以我使用start和end类来指示封闭重叠突出显示的开始和结束位置。

.highlight {
    font-size: 18px;
    line-height: 36px;
}
.highlight span {
    border-style: solid;
    border-width: 1px;
    padding: 3px;
    border-radius: 5px;
}
.highlight span span {
    margin: 0 -3px;
}
.highlight .start {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}
.highlight .end {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}
.highlight .purple {
    background-color: rgba(0, 0, 255, 0.15);
    border-color: rgba(0, 0, 255, 0.5);
}
.highlight .green {
    background-color: rgba(0, 255, 0, 0.15);
    border-color: rgba(0, 255, 0, 0.5);
}
.highlight .orange {
    background-color: rgba(255, 150, 0, 0.15);
    border-color: rgba(255, 150, 0, 0.5);
}
.highlight .red {
    background-color: rgba(255, 0, 0, 0.15);
    border-color: rgba(255, 0, 0, 0.5);
}   
.highlight .yellow {
    background-color: rgba(255, 255, 0, 0.15);
    border-color: rgba(255, 255, 0, 0.5);
}
.highlight .blue {
    background-color: rgba(0, 150, 255, 0.15);
    border-color: rgba(0, 150, 255, 0.5);
}

<div class="highlight">
    <span class="purple">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <span class="green start">sed do eiusmod tempor incididunt ut</span></span><span class="green end"> labore et dolore magna aliqua.</span> Ut enim ad minim veniam, quis nostrud <span class="orange">exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span> Duis aute irure dolor in reprehenderit in voluptate velit esse <span class="red">cillum dolore eu fugiat nulla pariatur. <span class="yellow start">Excepteur sint</span></span><span class="yellow end"> occaecat cupidatat non proident, <span class="blue start">sunt in culpa qui officia</span></span><span class="blue end"> deserunt mollit anim id est laborum.</span>
</div>