文本对齐：右；中断背景剪辑：文本；

问题描述

我试图使用 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>

解决方法

更新：问题中的代码段在 Firefox（在 Windows 10 上）和 Safari（在 IOS 上）似乎可以正常工作，因为输入的任何文本都可以选择班级团队的格式（透明文本和剪辑）OK。

但是，在 Windows 10 上的 Chrome/Edge 上则不然。文本按要求透明，但背景图像完全消失（如果您删除背景剪裁就可以了）。

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

最初我错误地认为问题与占位符缺少格式有关。我把这个留在这里，以防将来有人带着同样的想法来到这里：问题片段中第二个示例的格式差异不是因为 text-align: right 而是因为该示例没有显示输入的值而是它的占位符 - 它没有设置 value 属性。

占位符通常为浅灰色，这就是此处显示的内容。占位符可以设置样式，但它是一个伪元素，因此我们需要将 ::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>

background-image text-align webkit