如何在HTML / CSS中显示不同颜色的单词的重音符号？ [英] How to display accents over words with different colors in HTML/CSS?

问题描述

 pīngpāngqiúpāi
  

如何更改文字颜色，使文字呈蓝色，而上面的重音符号是红色的？

解决方案

CSS将整个字母视为一个整体，因此它只能是1色。

这是一个hacky版本：

这只有在内容保持不变的情况下才有效。

  span {font-size：48px;颜色：蓝色; position：relative;} span：after {content：'pīngpāngqiúpāi';位置：绝对的;左：0;高度：20像素;溢出：隐藏;的z-index：9999; color：red;}  

< span>pīngpāng qiúpāi

就我个人而言，不要用这个。这是一种可怕的做法。

I have some text like this, displayed in HTML:

pīng​pāng​qiú​pāi

How can I change the text color, such that the text is blue while the accents above are red?

解决方案

CSS treats the letter as a whole and therefore it can only be 1 colour.

Here is a hacky version:

This will only work if the content will stay the same.

span{
  font-size:48px;
  color:blue;
  position:relative;
}
span:after{
  content:'pīng​pāng​qiú​pāi';
  position:absolute;
  left:0;
  height:20px;
  overflow:hidden;
  z-index:9999;
  color:red;
}

<span>pīng​pāng​qiú​pāi</span>

Personally, I wouldn't use this. It's a horrible way of doing it.

这篇关于如何在HTML / CSS中显示不同颜色的单词的重音符号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！