在VS Code编写CSS文字动画时触发background-clip兼容性报错如何解决？

报错原因 #

这个提示是因为你仅声明了WebKit内核专属的带前缀属性，没有补充W3C标准属性，编辑器提示你补充来保证多浏览器兼容性。

解决方法 #

在-webkit-background-clip: text;后面补充标准属性background-clip: text;即可，标准属性写在私有属性后面可以让支持标准属性的浏览器优先调用标准规则，避免被前缀规则覆盖。

修改后的完整代码如下：

-webkit-text-stroke: 1px #fff;
background: url(/resources/back.png);
-webkit-background-clip: text;
background-clip: text;
/* 可选：如果需要兼容旧版火狐可以再加一行 -moz-background-clip: text; */
color: transparent; /* 补充：要实现背景填充文字的效果，需要额外设置文字颜色为透明，否则文字本身的颜色会挡住背景 */

内容的提问来源于stack exchange，提问作者shoumiksk