javascript - 如何正确分配 style.backgroundClip = "text"？

Question

我在处理一行代码时遇到了问题。我已经在网上搜索了几个小时，不得不求助于堆栈溢出。当我运行这段代码时，它什么也不做。这是代码:

e.style.backgroundClip = "text";

当我研究这个时，我发现“文本”并没有正式存在，但是如果我在带有背景剪辑的 css 中使用它，它就可以工作。如果您知道为什么这不起作用，请提供帮助。如果有帮助，我正在使用运行 iOS 8 的设备。

我正在使用一个名为“EXPRESSO HTML”的程序

Answer 1

将 text 设置为 background-clip 属性的值在规范中不是公认的值:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip#Values

您可以强制元素采用内联样式，如下所示:

el.setAttribute("style", "-webkit-background-clip:text");

请注意，它还采用了 -webkit- vendor 前缀。我认为只有 Chrome 支持它，我可能错了。

fiddle :http://jsfiddle.net/crwk2mac/

由于 background-clip 的这种变体没有得到很好的支持，如果没有经过良好测试的后备方案，建议不要使用它。这最好在 CSS 中完成，如果您试图完全在 javascript 中实现，可能会让您非常头疼。