解决<mark>标签高亮背景覆盖文本及背景透明度独立调整问题

方案1：将高亮背景置于所有文本后方 #

通过伪元素生成高亮背景，并将其层级设为文本后方，彻底避免背景覆盖前后文本的问题。修改mark的CSS样式如下：

mark {
  position: relative;
  padding-left: 2px;
  padding-right: 2px;
  /* 移除原background-color属性 */
}

mark::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff2cc;
  z-index: -1; /* 将背景层置于文本下方 */
}

原理：给mark设置position: relative作为伪元素的定位参考，伪元素单独承担背景角色，z-index: -1让它处于文本的后方，既保留高亮效果，又不会干扰其他行的文本显示。

方案2：仅调整背景透明度（不影响文本） #

如果不想修改层级结构，可以用rgba颜色值设置背景透明度——和opacity属性不同，rgba只会改变背景的透明度，不会影响高亮文本的清晰度。修改mark的样式：

mark {
  background-color: rgba(255, 242, 204, 0.7); /* 最后一位数值为透明度，范围0-1 */
  padding-left: 2px;
  padding-right: 2px;
}

这样背景会呈现半透明效果，即使和上下行文本有重叠，也不会完全遮挡内容。

另外补充：你的代码中@font-face的src属性写法有误，Google Fonts的正确引入方式是直接使用@import或HTML的<link>标签，无需在@font-face中引用CSS链接，避免字体加载异常。

内容的提问来源于stack exchange，提问作者Betule Sairafi