透明文本剪出背景
有什么办法让一个透明的文字切出一个背景效果，像下面的图片，使用CSS？
因为图片replace文字而失去所有珍贵的search引擎优化服务将会很难过。
我首先想到了阴影，但是我什么也找不出来…
图片是网站背景，绝对定位的<img>标签
这是可能的与CSS 3，但它不支持在所有的浏览器
带背景剪辑：文字; 您可以使用背景作为文字，但您必须将其与页面的背景alignment
body { background: url(palettes/26323.png) repeat; margin:10px; } h1 { background-color:#fff; overflow:hidden; display:inline-block; padding:10px; font-weight:bold; font-family:arial; color:transparent; font-size:200px; }span { background: url(palettes/26323.png) -20px -20px repeat; -webkit-text-fill-color: transparent; -webkit-background-clip: text; display:block; }
<h1><span>ABCDEFGHIKJ</span></h1>
尽pipe这可以通过CSS实现，但更好的方法是使用内联SVG和SVG掩码 。 这种方法比CSS有一些优点：
- 更好的浏览器支持 ：IE10 +，Chrome，Firefox，Safari …
- 这不会影响search引擎优化，因为蜘蛛可以抓取SVG内容（ 自2010年起谷歌索引SVG内容 ）
CodePen演示： SVG文本掩码
body,html{height:100%;margin:0;padding:0;} body{ background:url('8760/17195790401_94fcf60556_c.jpg'); background-size:cover; background-attachment:fixed; } svg{width:100%;}
<svg viewbox="0 0 100 60"> <defs> <mask id="mask" x="0" y="0" width="100" height="50"> <rect x="0" y="0" width="100" height="40" fill="#fff"/> <text text-anchor="middle" x="50" y="18" dy="1">SVG</text> <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text> </mask> </defs> <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/> </svg>
一种适用于大多数现代浏览器的方式（除了ie，边缘），尽pipe只有黑色的背景，是可以使用的
background: black; color: white; mix-blend-mode: multiply;
在你的文本元素，然后把任何背后你想要的。 乘法基本上将0-255颜色代码映射到0-1，然后将其乘以它后面的任何值，所以黑色保持黑色和白色乘以1并且实际上变为透明。 http://codepen.io/nic_klaassen/full/adKqWX/
这是可能的，但到目前为止，只有基于Webkit的浏览器（Chrome，Safari，Rockmelt，基于Chromium项目的任何东西）。
诀窍是在白色的背景中有一个元素，然后使用-webkit- background-clip: text; 基本上意味着“不要超出文本的背景”，并使用透明文本。
section { background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg); width: 100%; height: 300px; } div { background: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 0); width: 60%; heighT: 80%; margin: 0 auto; font-size: 60px; text-align: center; } p { background: url(http://norcaleasygreen.com/wp-content/uploads/2012/11/turf-grass1.jpg); -webkit-background-clip: text; }
我想你可以使用background-clip来实现类似的background-clip ，但是我还没有testing过。
看到这个例子：
http://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html
（只有Webkit，我不知道如何将黑色背景改为白色背景）
您可以使用反转/负/反转字体，并将其应用于font-face="…" CSS规则。 您可能必须使用字母间距来避免字母之间的白色空白。
如果你不需要特定的字体，那很简单。 下载一个可爱的，例如从这个倒置的字体集合 。
如果你需要一个特定的字体（比如说“Open Sans”），那很困难。 你必须将现有的字体转换为反转版本。 这可以通过Font Creator，FontForge等手动操作，但我们当然需要一个自动化的解决scheme。 我找不到说明，但一些提示：
- 如何将位图字体转换为TrueType字体 （再加上另一种方法 ）。 首先使用ImageMagick命令将字体字形渲染成高分辨率的光栅图像并将其反转，然后使用上述指令将它们转换回TrueType字体。
- 是否可以反转字体FontForge或另一个PGM？
- 创build一个反转（黑色白色）字体
你可以使用myadzel的Patternizer jQuery插件来实现跨浏览器的这种效果。 目前还没有跨浏览器的方式来使用CSS。
您可以通过将class="background-clip"到要将文本作为图像模式绘制的HTML元素来使用Patternizer，并在另外的data-pattern="…"属性中指定图像。 查看演示的来源。 Patternizer将创build一个带有图案填充文本的SVG图像，并将其置于透明地呈现的HTML元素下面。
如果在问题的示例图像中，文本填充模式应该是超出“模式化”元素的背景图像的一部分，我会看到两个选项（未经testing，我最喜欢的第一个选项）：
- 在SVG中使用遮罩代替背景图像。 正如在web-tiki的答案中 ，使用Patternizer仍然会添加SVG的自动生成function以及允许文本select和复制的顶部隐藏的HTML元素。
- 或者使用图案图像的自动alignment。 可以用类似于Gijs的答案的 JavaScript代码来完成。
演示截图
我需要使文本看上去与原文中的完全一样，但是我不能通过排列背景来伪造文本，因为元素背后有一些animation。 现在似乎还没有人提出这个问题，所以我就这样做了:(试图尽可能简单地阅读）
var el = document.body; //Parent Element. Text is centered inside. var mainText = "THIS IS THE FIRST LINE"; //Header Text. var subText = "THIS TEXT HAS A KNOCKOUT EFFECT"; //Knockout Text. var fontF = "Roboto, Arial"; //Font to use. var mSize = 42; //Text size. //Centered text display: var tBox = centeredDiv(el), txtMain = mkDiv(tBox, mainText), txtSub = mkDiv(tBox), ts = tBox.style, stLen = textWidth(subText, fontF, mSize)+5; ts.color = "#fff"; ts.font = mSize+"pt "+fontF; ts.fontWeight = 100; txtSub.style.fontWeight = 400; //Generate subtext SVG for knockout effect: txtSub.innerHTML = "<svg xmlns='http://www.w3.org/2000/svg' width='"+stLen+"px' height='"+(mSize+11)+"px' viewBox='0 0 "+stLen+" "+(mSize+11)+"'>"+ "<rect x='0' y='0' width='100%' height='100%' fill='#fff' rx='4px' ry='4px' mask='url(#txtSubMask)'></rect>"+ "<mask id='txtSubMask'>"+ "<rect x='0' y='0' width='100%' height='100%' fill='#fff'></rect>"+ "<text x='"+(stLen/2)+"' y='"+(mSize+6)+"' font='"+mSize+"pt "+fontF+"' text-anchor='middle' fill='#000'>"+subText+"</text>"+ "</mask>"+ "</svg>"; //Relevant Helper Functions: function centeredDiv(parent) { //Container: var d = document.createElement('div'), s = d.style; s.display = "table"; s.position = "relative"; s.zIndex = 999; s.top = s.left = 0; s.width = s.height = "100%"; //Content Box: var k = document.createElement('div'), j = k.style; j.display = "table-cell"; j.verticalAlign = "middle"; j.textAlign = "center"; d.appendChild(k); parent.appendChild(d); return k; } function mkDiv(parent, tCont) { var d = document.createElement('div'); if(tCont) d.textContent = tCont; parent.appendChild(d); return d; } function textWidth(text, font, size) { var canvas = window.textWidthCanvas || (window.textWidthCanvas = document.createElement("canvas")), context = canvas.getContext("2d"); context.font = size+(typeof size=="string"?" ":"pt ")+font; return context.measureText(text).width; }
只要把它扔到你的window.onload中，把身体的背景设置成你的图像，然后观看魔法的发生！
恐怕不可能用CSS。
你最好的办法是简单地使用一个图像（可能是一个PNG），并在其上放置好的替代/标题文本。
或者，您可以使用SPAN或DIV，并将图像作为背景，以您希望的文字作为背景，然后将文字缩进屏幕中。
只是把这个CSS
.banner-sale-1 .title-box .title-overlay { font-weight: 900; overflow: hidden; margin: 0; padding-right: 10%; padding-left: 10%; text-transform: uppercase; color: #080404; background-color: rgba(255, 255, 255, .85); /* that css is the main think (mix-blend-mode: lighten;)*/ mix-blend-mode: lighten; }
