小编jos*_*eCC的帖子

使用'transform',' - webkit-background-clip:text'和'color:transparent'时,Chrome 69不起作用

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;
}

Run Code Online (Sandbox Code Playgroud)

<span class="test">abcde</span>

Run Code Online (Sandbox Code Playgroud)

在此输入图像描述

但是'变换',

.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;
}

Run Code Online (Sandbox Code Playgroud)