css - 具有 translateY 位置的背景剪辑文本

Question

我在测试背景文本剪辑时遇到问题。我想将具有可变高度的 div 垂直居中。所以我使用了 TranslateY。问题是背景剪辑图像也会移动。

我在这里有一个小演示: http://jsfiddle.net/NickNoordijk/b3kehddk/2/

删除规则，将测试文本设置在正确的位置。

 transform: translateX(-50%) translateY(-50%);

有人为我提供解决方案吗？ :)

Answer 1

图像是带有文本的 div 的背景。您可能想尝试将图像作为包含带有文本的 div 的 div 的背景。