文本对齐：右；打破背景剪辑：文本；

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

更新：问题中的 sn-p 似乎在 Firefox（在 Windows 10 上）和 Safari（在 IOS 上）中工作正常，因为输入的任何文本都会获取班级团队的格式（透明文本和剪辑）OK .

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

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

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

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

就像在这个 sn-p 中一样：

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