CSS背景剪切: 文字从父元素背景中剪切

Question

我正在尝试让子元素div使用background-clip: text属性，从父元素div获取背景。基本上看起来就像文字被切割出来一样。

当背景在同一元素上时很容易实现，但是当背景在不同的div上时，我似乎无法想出方法。

.background {
    width: 100%;
    height: 700px;
    background: url('http://bgfons.com/uploads/gold/gold_texture464.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.background > div {
    flex: 1;
    font-size: 5em;
    font-weight: bold;
    text-align: center;
}

.foreground1 {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

<div class="background">
    <div class="foreground1">This is some text</div>
    <div class="foreground2">This is some text</div>
</div>

我在Plunkr中有以下内容（文本应从背景图片中获取其颜色）： https://next.plnkr.co/edit/4lGVXnfvex9Q6mmY?open=lib%2Fscript.js 这是否可能？如果是，如何实现？感谢任何帮助。

- Neekoy

---

请添加您的代码。 - sara moghanam

@Sara 添加了代码。如果你想检查的话，你可以使用 Plnkr。谢谢。 - Neekoy

Answer 1

您需要将 background-clip 应用于您想要剪切的背景：

.background {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: url('http://bgfons.com/uploads/gold/gold_texture464.jpg');
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
}

.background>div {
  flex: 1;
  font-size: 3em;
  font-weight: bold;
  text-align: center;
}

.foreground1 {
  color: transparent;
}

<div class="background">
  <div class="foreground1">This is some text</div>
  <div class="foreground2">This is some text</div>
</div>

- Kosh

---

太棒了。我把问题过于简化了，所以必须进行一些调整，但这正是有所帮助的地方。谢谢 :) - Neekoy