如何在HTML中用多种颜色突出显示文本的不同部分
如何在HTML中用多种颜色突出显示文本的不同部分
提问于 2020-01-10 07:04:46
假设我们有一段文本，我们想用不同的颜色突出显示文本的不同部分，如下所示：
高亮显示可以包括文本跨度之间的潜在重叠，如上例所示。我只是想知道我需要使用哪种技术来实现这一点？我是否应该尝试使用CSS和HTML，以了解如何在HTML中为span或mark标记定义类？或者，有没有什么免费的东西可以随时使用，这样我就可以生成带有适当标签的文本，并将其放入HTML中以生成彩色文本？
我的模板在HTML5中。
Stack Overflow用户
发布于 2021-09-21 21:20:57
这是一个看似简单的问题，但事实证明它并不是微不足道的。您不能尝试部分重叠元素，因为它们将与一个完全包含在另一个中的元素级联。下面的句子没有突出显示句子的开头是紫色，中间是紫色和绿色，结尾是绿色。相反，它用紫色突出显示整个句子，用绿色突出显示中间部分。
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59673361
复制相关文章
相似问题
腾讯云开发者
