来自文本及其父 div 的剪贴蒙版

Question

我看到有几个人问过这个问题，但它总是被关闭并重定向到一个类似的问题（这是不同的）。

问题是：如何从文本和文本元素的最近的父div制作剪贴蒙版？不要混淆如何根据文本和文本背景制作剪贴蒙版。

非常感谢任何帮助。如果您可以在父 div 中制作淘汰文本，这将带来惊人的多功能性！

谢谢！

Answer 1

background-clip: text 属性将除文本之外的所有内容从背景中删除，使文本着色/填充为背景颜色/图像。 （当然，如果您将文本颜色设置为transparent。）

你想要的恰恰相反。但由于background-clip: text 没有真正的逆，你可以使用the trick they use here。

方法 1：CSS 技巧使其看起来像剪切文本

它的作用是让您认为文本是透明的，方法是使用相同的背景填充/着色文本并在其间放置一些其他内容以进行区分。

在你的屏幕上你会看到例如：

1. 红色背景。 （使用 ::after 元素创建。）
2. 较小的黑色元素（使其周围的红色背景元素可见）。 （使用 ::before 元素创建。）
3. 顶部有红色文字。 （原始元素。）

现在它似乎文本是透明的，因为它与红色背景元素具有相同的填充。所以诀窍是让文本和背景具有相同的填充和大小，并以相同的方式定位填充。

工作示例：

/*
  Contains only the text that is
  filled/colored with the background.
*/
.cut-out-text {
    position: relative;
    font-size: 100px;
    font-weight: bold;
    padding: 50px;
    background: linear-gradient(to right, red, blue);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/*
  Layer in between. (Black in this case.)
    This layer is sized just a bit smaller than the
    container to leave the `::after` visible around.
*/
.cut-out-text::before {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -1;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    background: #000;
}

/*
  Layer that repeats the original background
    and appears to be the real background,
  making it look like the text is cut out.
*/
.cut-out-text::after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: -2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: inherit;
    background-image: inherit;
}

<div class="cut-out-text">Hello World</div>

方法 2：使用 SVG

如果背景不像颜色或线性渐变那样简单，您可以使用 SVG 图像覆盖背景。

例如，这个 SVG 的内容是带有遮罩或剪切路径的全尺寸 <rect>。

此蒙版或剪切路径将包含应显示rect 部分的黑白内容。

在此掩码中，您可以放置​​文本以将其剪掉。 See examples here.

提示：如果您不想要一个全尺寸的黑色 <rect> 并将文本剪切为重叠内容，您还可以使用带有常规 HTML 的 <foreignObject>（其中可以使用 CSS 类等进行样式设置）。 (See this JSFiddle example.)

#some-header-background {
    width: 100%;
    height: 100px;
    background: linear-gradient(to right, red, blue);
}

#overlapping-content-with-text-cut-out {
    width: 100%;
    height: 100%;
}

text.cut-out-text {
    font: bold 60px sans-serif;
}

<div id="some-header-background">
  
  <svg id="overlapping-content-with-text-cut-out" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <mask id="cut-out-text">
        <rect x="0" y="0" width="100%" height="100%" fill="white" />
        <text class="cut-out-text"
          fill="black"
          x="0%" y="100%"
        >Hello World</text>
        <!--
           More about styling and position text in SVG:
           https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
           https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan
        -->
      </mask>
    </defs>

    <rect x="0" y="0" width="100%" height="100%" mask="url(#cut-out-text)" />
    <!-- OR use HTML for overlapping content: -->
    <!--
    <foreignObject x="0" y="0" width="100%" height="100%" mask="url(#cut-out-text)">
      <div class="overlapping-content">Overlapping</div>
    </foreignObject>
    -->
  </svg>
  
</div>

其他方法请查看this question。