突出显示重叠的css

Question

我正在寻找一个非常具体的外观，我正在设计并碰到一堵砖墙。我想＆＃34;突出显示＆＃34; quotes和<h2>标签，背景颜色重叠（类似于使用真正的荧光笔）。

这是我想要做的一个例子：

我尝试了几种选择。

1. 尝试编辑代码的样式，
2. 使用具有轻微不透明度的背景渐变等，我根本无法使其工作。

这是我的最新尝试，它看起来像垃圾，因为渐变不会产生我想要的外观，并且背景似乎被视为一个元素并且不会在多行上重叠：

.highlight span { 
    background-image: linear-gradient(#e2e200,#ffff00);
    opacity:1;
    color: #fff; 
    display: inline;
    padding: 0.45rem;
    box-decoration-break: clone;
}

任何想法都将不胜感激！

Answer 1

这是一个解决方案：

使用background-color: rgba(255,255,0,0.3);使黄色透明

并margin-bottom: -15px;使它们重叠

HTML：

<h2 class = "highlight">
  <span>Test again</span>
</h2>
<h2 class = "highlight">
  <span>Test</span>
</h2>

CSS：

.highlight span { 
    background-color: rgba(255,255,0,0.3);
    opacity:1;
    color: #555; 
    display: inline;
    padding: 0.45rem;
    box-decoration-break: clone;
    font-family: arial;
}

.highlight {
    margin-bottom: -15px;
}

JSFiddle：https://jsfiddle.net/x3t1qvud/

Answer 2

使用背景颜色突出显示文本Ex：文本内部跨度，以及容器Ex：<p>。

看看小提琴 https://jsfiddle.net/harikashekhar/93qy9406/5/

div {
  padding: 2em;
  border: 1px solid grey;
  line-height: 180%;
}
p {
  background-color: #FFFBCC;
}
span.highlight {
  background-color: #FFFBAA;
  padding: 0.2em;
}
<div>
   <p>
       <span class="highlight">This is a text. This is a text. </span>
       This is a text. This is a text. This is a text
       <span class="highlight">This is a text. This is a text</span>
  </p>
</div>