在任何HTML元素上覆盖一个半透明的框

Question

我有一个无法控制内容的HTML文件。 我所能做的就是注入CSS文件和/或JavaScript文件（如果需要，包括jQuery之类的库）。

在HTML中，将需要突出显示元素并添加工具提示（例如，它们具有特定的data-attribute属性），但是它们并不方便地位于我可以对其应用样式的特定容器中。 这些元素可以是<span> ， <a> ， <img> ， <div>或几乎其他任何内容（内联或块）。

如果可以的话，我想用纯CSS解决这个问题，但是如果需要，我愿意使用JavaScript修改DOM，但是最终的HTML必须与原始HTML具有相同的布局，只是突出显示在HTML上具体元素。

例如，我可能有一些这样的HTML：

<body>
    <p>This is a sample line of text with <a href="#">a link</a> in the middle that should be highlighted</p>

    <p>This is a sample line of text with <a href="#" data-highlight="true">a link</a> in the middle that should be highlighted</p>
</body>

最终应该看起来像这样：

Answer 1

我会去这样的事情。 如您所愿，仅CSS，HTML不变。

*[data-highlight="true"] -选择所有具有data-highlight="true"元素
background: rgba(255, 0, 0, 0.5) -给出具有50％不透明度的rgba背景。

要记住的事情

如果某些元素具有特定的CSS规则，则需要调整代码下方的位置。 例如，如果一个<span>需要具有以下规则但已经具有position: absolute位置值不能更改为relative并且特定规则必须在下面覆盖。

片段

 *[data-highlight="true"] { position: relative; } *[data-highlight="true"]:after { display: block; content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(255, 0, 0, 0.5); border: 1px solid red; }

 <body> <p>This is a sample line of text with <a href="#">a link</a> in the middle that should be highlighted</p> <p>This is a sample line of text with <a href="#" data-highlight="true">a link</a> in the middle that should be highlighted</p> </body>

在任何HTML元素上覆盖一个半透明的框

问题描述

1 个解决方案

解决方案1
3 已采纳 2018-07-04 12:33:30

要记住的事情

片段

在任何HTML元素上覆盖一个半透明的框

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-07-04 12:33:30

要记住的事情

片段

解决方案1
3 已采纳 2018-07-04 12:33:30