Chrome 复制带有透明背景的文本

plupiseo  于 2023-09-28  发布在  Go
关注(0)|答案(1)|浏览(149)

解释我的问题最简单的方法是使用Youtube网站来复制它。我在Mac OS上使用Google Chrome 98进行测试:
复制步骤:
1.在黑暗模式下访问Youtube(背景是#181818)(在黑暗模式下最容易看到效果,但它也应该在明亮模式下工作,但背景将是#f9f9f9)
1.打开Developer Tools并将以下内容粘贴到控制台中:

const div = document.createElement("div");
div.style.position = "absolute";
div.style.left = "100px";
div.style.top = "300px";
div.innerText = "This is a test";
div.style.setProperty("background-color", "transparent", "important");
document.body.appendChild(div);

1.尝试复制文本并粘贴到Google文档中。可以看到黑色背景。
我的目标是通过JavaScript插入一个div,这样当文本被复制和粘贴时,就不会有黑色的背景。我的怀疑是,由于我将背景设置为透明,在复制时,它继承了页面的背景(因为Youtube在其脚本标记之一中设置了html { background: #181818 !important}
所以如果我不把背景设置成透明的,我可以这样做:div.style.setProperty("background-color", "rgba(0,0,0,0.01)", "important");,黑色背景似乎消失了(即使它在技术上仍然存在)。在这种情况下,有没有办法让插入的div在粘贴时文本真正透明?
我想保留所有其他文本格式以外的背景,所以拦截从JavaScript复制将是不理想的,我正在寻找一个CSS解决方案。

ajsxfq5m

ajsxfq5m1#

我正在解决一个类似的问题,发现使用pre而不是div是一个解决方案。

body {
  background-color: yellow;
  font-family: Times, "Times New Roman", Georgia, serif;
}

pre {
  font-family: Times, "Times New Roman", Georgia, serif;
}
<div>I want to copy text in <strong>div</strong> with styles such as <b>bold</b>, <i>italic</i>, <u>underline</u>, etc., except for the background color.</div>

<pre>I want to copy text in <strong>pre</strong> with styles such as <b>bold</b>, <i>italic</i>, <u>underline</u>, etc., except for the background color.</pre>

我不知道为什么会这样。
令人惊讶的是,在上面的代码片段中复制div中的一部分文本包括背景颜色,而选择和复制div中的整个文本不包括背景颜色。当选区接触到前面板时,它是否不再包括背景颜色?
这可能是特定于Chromium的行为。(我还没有在Safari或Firefox中测试过这个。)我想要一个对此了解更多的人的解释。
希望这对你有帮助。

相关问题