CSS代码：
.test {
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #e74c3c 20%, #f4d03f 40%, #2ecc71 60%, #5dade2 80%, #a569bd 100%);
display: inline-block;
}
<span class="test">abcde</span>
但有了“转变”，
.test {
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #e74c3c 20%, #f4d03f 40%, #2ecc71 60%, #5dade2 80%, #a569bd 100%);
transform-origin: 0;
transform: scale(1.2); /*any attributes*/
display: inline-block;
}
<span class="test">abcde</span>
不起作用。
结果是：
chrome 的版本是 69。有人可以告诉我为什么这不起作用吗？
显然，嵌套 div 以前不是问题-webkit-background-clip但在 Chrome 69 中它不起作用。
.test {
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #e74c3c 20%, #f4d03f 40%, #2ecc71 60%, #5dade2 80%, #a569bd 100%);
display: inline-block;
}
<span class="test">I'M VISIBLE</span>
<span class="test">
<div>
I'M NOT VISIBLE IN CHROME 69
</div>
</span>
<span class="test">
I'M ALSO NOT VISIBLE IN CHROME 69
<div>
I'M NOT VISIBLE IN CHROME 69
</div>
</span>
上面的代码片段适用于 Firefox (v62) 和 Chrome Canary(v71) 中的所有情况
EDITSafari (v11) 与 chrome 69 具有相同的行为，只是代码片段中的第一个案例有效
EDIT 2如果您使用 div 来实现新行，请将 div 替换为<br/>是一个可能的解决方法。
.test {
-webkit-background-clip: text;
color: transparent;
background-image: linear-gradient(to right, #e74c3c 20%, #f4d03f 40%, #2ecc71 60%, #5dade2 80%, #a569bd 100%);
display: inline-block;
}
<span class="test">I'M VISIBLE</span>
<span class="test">
<br/>
I'M NOW VISIBLE IN CHROME 69 & Safari (v11)
</span>
<span class="test">
I'M ALSO NOW VISIBLE IN CHROME 69 & Safari (v11)
<br/>
I'M NOW VISIBLE IN CHROME 69 & Safari (v11)
</span>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
