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

Question

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

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

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

谢谢！

Answer 1

background-clip: text 属性将除文本之外的所有内容从背景中删除，留下文本 colored/filled 和背景 color/image。（当然，如果您将文本颜色设置为 transparent。）

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

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

它的作用是让你认为文本是透明的，filling/coloring它具有相同的背景，并在两者之间放置一些其他内容以进行区分。

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

红色背景。（使用 ::after 元素创建。）
一个较小的黑色元素（使其周围的红色背景元素可见）。（使用 ::before 元素创建。）
顶部为红色文字。（原始元素。）

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

工作示例：

/*
  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>

方法二：使用 SVG

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

例如，此 SVG 的内容可以是带有蒙版或剪切路径的全尺寸 <rect>。

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

在此蒙版中，您可以放置要剪切的文本。 See examples here.

提示：如果您不想只使用全尺寸黑色 <rect> 并将文本裁剪为重叠内容，您还可以使用 <foreignObject> with regular HTML inside (which can be styling using CSS classes, etc). (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。

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

Clippingmask from text and its parent div

css

clip

clip-path

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

方法二：使用 SVG

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

Clippingmask from text and its parent div

css

clip

clip-path

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

方法二：使用 SVG

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