解释我的问题最简单的方法是使用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中测试过这个。）我想要一个对此了解更多的人的解释。
希望这对你有帮助。