Question

我正在尝试在子div上获取in_bit，以从父div获取其背景。基本上看起来像是剪掉了文字。

当背景位于同一元素上时很容易做到，但我似乎无法弄清楚背景位于不同的div上。

background-clip: text

.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;
}

我在Plunkr中具有以下内容（文本应从背景图片获得其颜色）：

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

这可能吗？如果可以，怎么办？任何帮助表示赞赏。

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>

CSS background-clip：来自父元素背景的文本

1 个答案: