透明文本被删去背景

Question

是否有任何方法可以使用CSS从下图中的背景效果中剪切出透明文本？
因为图像替换文本而失去所有宝贵的SEO会很难过.

我首先想到阴影,但我无法想出任何事情......

图像是站点背景,是绝对定位的<img>标记

Answer 1

尽管CSS可以实现这一点,但更好的方法是使用带SVG屏蔽的内联SVG.这种方法比CSS有一些优势:

• 很多更好的浏览器支持:IE10 +,铬,火狐,Safari浏览器...
• 这不会影响搜索引擎优化,因为蜘蛛可以抓取SVG内容(自2010年以来谷歌索引SVG内容)

CodePen演示:SVG文本掩码

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/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>

如果您的目标是使文本可选择和可搜索,则需要将其包含在<defs>标记之外.以下示例显示了使用<use>标记保持透明文本的方法:

body,html{height:100%;margin:0;padding:0;}
body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}

<svg viewbox="0 0 100 60">
  <defs>
    <g id="text">
      <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>
    </g>
    <mask id="mask" x="0" y="0" width="100" height="50">
      <rect x="0" y="0" width="100" height="40" fill="#fff"/>
      <use xlink:href="#text" />
    </mask>
  </defs>
  <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>
  <use xlink:href="#text" mask="url(#mask)" />
</svg>

Answer 2

它可以使用css3,但并不是所有浏览器都支持它

使用background-clip:text; 您可以使用文本的背景,但必须将其与页面背景对齐

body {
    background: url(http://www.color-hex.com/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(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}

<h1><span>ABCDEFGHIKJ</span></h1>

http://jsfiddle.net/JGPuZ/1337/

自动对齐

使用一点点javascript你可以自动对齐背景:

$(document).ready(function(){
  var position = $("h1").position(); //Position of the header in the webpage
  var padding = 10; //Padding set to the header
  var left = position.left + padding;
  var top = position.top + padding;
  $("h1").find("span").css("background-position","-"+left+"px -"+top+"px"); 
});

body {
    background: url(http://www.color-hex.com/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(http://www.color-hex.com/palettes/26323.png) -20px -20px repeat;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1><span>ABCDEFGHIKJ</span></h1>

http://jsfiddle.net/JGPuZ/1336/

Answer 3

可以使用一种适用于大多数现代浏览器(除了边缘)的方法,尽管只有黑色背景

background: black;
color: white;
mix-blend-mode: multiply;

在你的文本元素中,然后放置你想要的任何背景.乘法基本上将0-255颜色代码映射到0-1,然后将其与背后的任何颜色相乘,因此黑色和黑色保持乘以1并且实际上变为透明. http://codepen.io/nic_klaassen/full/adKqWX/