解释我的问题最简单的方法是使用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解决方案。
1条答案
按热度按时间ajsxfq5m1#
我正在解决一个类似的问题,发现使用pre而不是div是一个解决方案。
我不知道为什么会这样。
令人惊讶的是,在上面的代码片段中复制div中的一部分文本包括背景颜色,而选择和复制div中的整个文本不包括背景颜色。当选区接触到前面板时,它是否不再包括背景颜色?
这可能是特定于Chromium的行为。(我还没有在Safari或Firefox中测试过这个。)我想要一个对此了解更多的人的解释。
希望这对你有帮助。