Question

我在测试背景文字剪辑时遇到了问题。我想垂直居中div，它有一个可变的高度。所以我使用了TranslateY。问题是背景剪辑图像也应该移动。

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

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

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

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

Answer 1

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

Answer 2

不确定这是否是你想要的。

中心文字的替代方式：

水平：左右设置为0px，边距设置为自动。垂直：将顶部和底部设置为0px。将身高设置为1em

/* Main styles */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);

.box-with-text {
  background-image: url(http://tympanus.net/codrops-playground/assets/images/posts/23145/image1.jpg);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

/* Other styles */
body {
  background-image: url(http://tympanus.net/codrops-playground/assets/images/posts/23145/image1.jpg);
    
   
    
  color: #FFF;
}

.box-with-text {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin: auto;
  height: 1em;
  background-repeat: repeat;
  background-position: 50% 50%;
  background-size: cover;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
  font: 26vmax/.85 Open Sans, Impact;
}

<div class="box-with-text">
  Test
</div>

与translateY位置的背景剪辑文本

2 个答案: