Question

我希望将带有背景图像的整页元素内的元素垂直居中，其中包含背景剪切文本。使用-webkit-background-clip: text和相应的IE后备功能可以很好地进行剪裁，但每次尝试使用display: inline-block或position: absolute将文本框居中时，文字会立即消失。

body {
  margin: 1rem;
}

.box {
  height: calc(100vh - 2rem);
  border: 1px solid;
  background-image: url(http://lorempixel.com/1280/720/);
  -webkit-background-clip: text;
}

.align {
  /* to right-align the text box */
  text-align: right;
  
  /* uncomment below to see the issue */
  /* display: inline-block; */
}

.title {
  /* Duplicated here for Safari */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: yellow;
  
  margin: 0;
  font: bold 6rem/1 sans-serif;
  text-transform: uppercase;
  text-align: center;
}

<article class="box">
  <div class="align">
    <h1 class="title">The Title</h1>
</article>

我创建了a Codepen with an example。如果您取消注释display: inline-block上的.align或尝试将其与position: absolute和transform垂直居中，则文字会消失。

我确信我遗漏了一些简单的东西，非常感谢任何建议！

Answer 1

看起来这确实是一个已知问题，并在Chrome 63中得到了解决！

-webkit-background-clip：文本和垂直居中的文本

1 个答案: