css - 文本对齐:右；打破背景剪辑:文本；

Question

我试图使用 gif 作为文本的背景，如示例中所示，但是当文本右对齐时，它会变得透明。知道这是否可以解决吗？

.team {
    font-family: "Poppins", sans-serif;
    width: 100%;
    border: none;
    font-size: 2rem;
    text-transform: uppercase;
    text-align: left;
    font-weight: 600;
    background-image: url(https://media1.giphy.com/media/3oGRFmtqXJogGVcz6g/giphy.gif);
    color: transparent;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
}

<center>
  <input class="team" type="text" placeholder="Align Left" value="This works fine" />
  <input class="team" style="text-align: right;" type="text" placeholder="Try me" />
  <input class="team" style="text-align: center;" type="text" placeholder="Align Center" value="This also works fine"/>
</center>

Answer 1

更新:问题中的代码片段在 Firefox(在 Windows 10 上)和 Safari(在 IOS 上)中似乎工作正常，因为输入的任何文本都会选择类(class)团队的格式(透明文本和剪辑)OK。

但是，在 Windows 10 的 Chrome/Edge 上却没有。文本按要求透明，但背景图像完全消失(如果删除剪裁，背景就可以了)。

我找不到任何关于这可能是错误的报告。希望有人可以。

本来我误以为这个问题是关于占位符缺少格式的问题。我把它留在这里以防将来有人以同样的想法登陆这里: 问题片段中第二个示例的格式差异不是因为 text-align: right 而是因为该示例没有显示输入的值而是它的占位符 - 它没有值属性集。

占位符通常是浅灰色，这就是此处显示的内容。占位符可以设置样式，但它是一个伪元素，因此我们需要将::placeholder 添加到选择器。

如这段代码所示:

.team, .team::placeholder  {
    font-family: "Poppins", sans-serif;
    width: 100%;
    border: none;
    font-size: 2rem;
    text-transform: uppercase;
    text-align: left;
    font-weight: 600;
    background-image: url(https://media1.giphy.com/media/3oGRFmtqXJogGVcz6g/giphy.gif);
    color: transparent;
    background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
}

.team::placeholder {
  text-align: right;
}

<center>
  <input class="team" type="text" placeholder="Align Left" value="This works fine" />
  <input class="team" style="text-align: right;" type="text" placeholder="Try me" />
  <input class="team" style="text-align: center;" type="text" placeholder="Align Center" value="This also works fine"/>
</center>