在任何HTML元素上覆盖半透明框
在任何HTML元素上覆盖半透明框
提问于 2018-07-04 20:24:00
我有一个超文本标记语言文件，我不能控制的内容。我所能做的就是注入一个CSS文件和/或JavaScript文件(如果需要的话，包括jQuery之类的库)。
在HTML中，有一些元素需要突出显示并添加工具提示(比如说，它们有一个特定的数据属性)，但是它们不能方便地位于我可以应用样式的特定容器中。这些元素可以是<span>、<a>、<img>、<div>或任何其他元素(内联或块)。
我想解决这个问题，如果我可以用纯CSS，但我愿意使用JavaScript来修改DOM，如果需要的话，但是最终的超文本标记语言必须具有与原始相同的布局，这只是漂浮在特定元素上的高光。
例如，我可能有一些这样的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>它应该看起来像这样：
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-04 20:33:31
我会选择这样的东西。如您所愿，只支持CSS，HTML不做任何更改。
*[data-highlight="true"]-使用data-highlight="true"
选择所有元素
background: rgba(255, 0, 0, 0.5)-提供50%不透明度的背景。
要记住的事情
如果有一些元素对下面的位置有特定的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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51173643
复制相关文章
相似问题