透明文本剪出背景

有什么办法让一个透明的文字切出一个背景效果,像下面的图片,使用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; }​ 

http://jsfiddle.net/BWRsA/

我想你可以使用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; }