我在这里阅读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。
感谢每一个帮助和建议!提前谢谢!
答案 0 :(得分:3)
如果我正确理解了这个问题,您可以使用-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浏览器测试以查看效果
#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
:
#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浏览器测试以查看效果
#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;