Question

我在这里阅读Cutting a triangle out of div, BUT have it horizontally centered，我正在寻找一个非常相似的解决方案，但不完全相同。因为问题是从2014年开始，我更愿意开始一个新的主题。

上述问题的一个很好的解决方案是http://jsfiddle.net/FaddH/：

body {
    background-image: url(http://i.imgur.com/XxGffrU.jpg); background-size: cover;
    background-position: center bottom; min-height: 1000px; margin: 0;
}

#your_div { position: fixed; top: 30%; width: 90%; left: 5%; height: 100px; }
#back { width: 100%; height: 100%; }

<div id="your_div">
    <svg id="back" viewBox="0 0 100 10" preserveAspectRatio="none">
        <path d="M 0,0 L 100,0 100,10 0,10 0,0 M 50,8 L 55,6 52,6 52,2 48,2 48,6 45,6 z" style="fill: white; fill-rule: evenodd;"></path>
    </svg>
</div>

现在我想做同样的事情而不是箭头，我需要一个文本来剪切div并使背景可见。这会以某种方式成为可能吗？

我还可以想象将文本准备为SVG文件，但最好是将文本直接写入html / js。

感谢每一个帮助和建议！提前谢谢！

Answer 1

如果我正确理解了这个问题，您可以使用-webkit-background-clip: text和-webkit-text-fill-color: transparent的组合，但这是 experimental 功能，只适用于webkit浏览器并且假设要在即将发布的Firefox 49（read the "text" row of the Browser Compatibility table）上得到支持，但对于IE，很抱歉。

CodePen 1
.. _{for -webkit-background-clip: text部分，目前，使用webkit浏览器测试以查看效果}

＆＃13;

#test-div {
  width: 800px;
  height: 200px;
  font-weight: bold;
  font-size: 120px;
  background: url('//lorempixel.com/800/200/sports/3/') no-repeat;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

＆＃13;

<div id="test-div">Dummy Text</div>

＆＃13;

好消息就像你在问题中提到的那样，SVG在浏览器支持方面会更加出色（回到IE9），mask元素也可以包含多个元素，形状，文本，路径。除此之外，通过使用不同级别的灰度颜色作为alpha通道[CodePen example]，可以控制剪裁的不透明度。

使用SVG mask：

＆＃13;

#theSVG #txtMask {
  font-size: 120px;
  font-weight: bold;
  fill: white;
}
#theSVG #theIMG {
  mask: url(#theMask);
}

＆＃13;

<svg id="theSVG" viewBox="0 0 800 200" width="800" height="200">
  <defs>
    <mask id="theMask">
      <text id="txtMask" x="0" y="50%">Dummy Text</text>
    </mask>
  </defs>
  <image id="theIMG" xlink:href="http://lorempixel.com/800/200/sports/3/" x="0" y="0" height="200px" width="800px" />
</svg>

＆＃13;

更新了修改：

对于类似效果，例如问题中白色矩形内的截止箭头，但使用文本代替CSS和SVG解决方案：

CodePen 2
.. _{for -webkit-background-clip: text部分，目前，使用webkit浏览器测试以查看效果}

＆＃13;

#test-div,
#test-div .txt {
  width: 800px;
  height: 200px;
  font-weight: bold;
  font-size: 60px;
  position: relative;
  background: url('//lorempixel.com/800/200/sports/3/') no-repeat;
}
#test-div .white-rect {
  width: 80%;
  height: 120px;
  line-height: 120px;
  position: relative;
  top: 30px;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.9);
}
#test-div .txt {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  padding-top: 50px;
  text-align: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* SVG */

#theSVG #txtMask {
  font-size: 60px;
  font-weight: bold;
}

＆＃13;

<h2>Using "background-clip:text"</h2>
<div id="test-div">
  <div class="white-rect"></div>
  <div class="txt">Dummy Text</div>
</div>
<hr>
<h2>Using SVG</h2>
<svg id="theSVG" viewBox="0 0 800 200" width="800" height="200">
  <defs>
    <mask id="theMask">
      <rect x="10%" y="30" width="80%" height="120" fill="white" />
      <text id="txtMask" x="30%" y="55%">Dummy Text</text>
    </mask>
  </defs>
  <image xlink:href="http://lorempixel.com/800/200/sports/3/" x="0" y="0" height="200px" width="800px" />
  <rect mask="url(#theMask)" x="10%" y="30" width="80%" height="120" fill="rgba(255,255,255,0.9)" />
</svg>

＆＃13;

带文字的CutOut DIV（html / js / css）

1 个答案: