带背景图像的文本来自底层div

Question

我需要设置文本从父div的背景，我得到的问题是，我不能设置背景，因为我有文本在另一个div。这里有一个例子。

null

.p1{
  background-color: pink;
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.p2{
  width: 250px;
  height: 250px;
  text-align: center;
  background-color: green;
}

.title{
  color: transparent;
}

<div class="p1">
  <div class="p2">
    <h1 class="title">Test</h1>
  </div>
</div>

null

我需要H1是粉红色作为第一个div。在我的项目中，我不使用粉色，而是背景图像。

Answer 1

答案是：直接将background-color/background-image应用于class.title。它的工作愉快地显示一条黑色的文字，黄色在中间高度的绿色块。享受：）

.title{
        color: black;/*transparent;*/
        background-color: yellow; 
        position: relative;
        top: 50%;        
      }