CSS background-clip: text from parent element background

Question

I'm trying to get a background-clip: text on a child div to get its background from the parent div. Basically it should look like the text is cut out.

It's easy to do when the background is on the same element, but I can't seem to figure out when the background is on a different 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>

I have the following in Plunkr (The text should get its color from the background image):

https://next.plnkr.co/edit/4lGVXnfvex9Q6mmY?open=lib%2Fscript.js

Is this possible, and if so, how? Any help is appreciated.

Answer 1

You have to apply background-clip to the background which you want to 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>