Question

是否有一种方法可以防止“搜索”的背景色隐藏其左侧的“ e”部分（请参见代码段）？

我仍然希望背景颜色和“ e”重叠，但是我希望“ e”位于背景颜色之上。我正在寻找一种使用仅CSS 和而无需更改字体系列的方法。但是，如果不可能的话，我愿意接受涉及更改html标记的解决方案。

我也在寻找一种适用于任何单词的通用解决方案（例如，在“体操运动员”中突出显示“ nas”）

body {
  font-family: Impact;
  font-size: 70px;
}

.highlighted {
  background: yellow
}

.italic {
  font-style: italic;
}

<div class="italic">Re<span class="highlighted">search</span>ers</div></br>
<div class="italic">Gym<span class="highlighted">nas</span>ts</div>

Answer 1

只需如下调整z-index：

body {
  font-family: Impact;
  font-size: 70px;
}

.highlighted {
  background: yellow;
  position:relative;
  z-index:-1;
}

.italic {
  font-style: italic;
  position:relative;
  z-index:0; /*To create a stacking context and be sure the negative z-index won't go below the parent*/
}

<div class="italic">Re<span class="highlighted">search</span>ers</div><br>
<div class="italic">Gym<span class="highlighted">nas</span>ts</div>

如何防止背景色隐藏斜体文本的一部分

1 个答案: