突出显示重叠的文本

Question

我希望使用CSS背景阴影来注释HTML中的某些文本。

但是，这些区域可能会彼此重叠。

在此示例中，我希望将“ Jim，Alex，但尼丁”的背景涂成黄色，然后将“ Dunedin，184.3”涂成蓝色。因此，在这种情况下，“ Dunedin”元素将以绿色阴影显示。

我非常确定这在HTML中是不可能的，因为我认为span元素不能重叠。

是否提供其他解决方案？

Answer 1

您可以通过相对/绝对定位，z-索引和将这些元素的不透明度设置为1以下的任何东西来完成您要完成的大部分工作。

例如：

<h1>Image Transparency</h1>
<span style='opacity:.3;background:yellow; position:absolute;width:100px; height: 1em;'>&nbsp</span>
<span style='opacity:.3;background:#98fffc; position:absolute;width:100px; height: 1em; left: 50px;'>&nbsp</span>
<p>The opacity property specifies the transparency of an element. The lower the 
value, the more transparent:</p>

祝你好运！

Answer 2

可以做到吗？是的。

应该完成吗？也许不是我展示的方式。只是为了让您入门。

span:first-of-type {
  background-color: yellow;
}

span:last-of-type {
  background-color: lightblue;
  display: inline-block; /* needed so that the next line will work as we cannot transform inline elements */
  transform: translateX(-59px); /* move this element 59 pixels to the left so that it overlaps */
  mix-blend-mode: multiply; /* blend the backgrounds together */
}

<span>Jim, Alex, Dunedin</span>
<span>Dunedin, 184.3</span>

也许更有意义的是处理此HTML，以便将标记更改为如下所示：

.yellow {
  background-color: yellow;
}

.blue {
  background-color: lightblue;
}

.yellow.blue {
  background-color: lightgreen;
}

<span class="yellow">Jim, Alex</span><span class="yellow blue">Dunedin</span><span class="blue">, 184.3</span>

<!-- note, newlines above would result in whitespace separating the background colors between the <span>'s -->