透明文字切出背景

90

有什么方法可以使用CSS 从背景效果中切出一个透明文本，如下图所示？
这将是可悲的输，因为替换文本图像的所有珍贵的SEO。

透明文字切出背景

我首先想到了阴影，但是我什么也搞不清...

图片是网站背景，是绝对定位的<img>标签

css  svg  fonts  css-shapes 
— 爱达格
source
“由于图像替换了文字，因此丢失了所有宝贵的SEO”。还有一些现有的图像替换技术仍然非常友好。顺便说一句：实际上，信件后面的背景也需要保持透明，这就是这里的问题……
— Feeela 2012年
是的，如果使用css，这将是一个很好的做法...
— Jessica Lingmn 2012年
我看不出为什么<h1><img alt="Some Text" /></h1>SEO不如友善的原因<h1>Some Text</h1>。传统上，图像的问题在于它们只是被不存在支持标记地转储到了页面上。
— cimmanon
@cimmanon是的，您是对的。我可能可以使用图像而不会失去SEO点，但是您仍然无法选择文本，在页面上搜索，链接将更加复杂，并且更新文本将
— 花费
2
众所周知，Google完全采用CSS图像替换技术，非常酷： mezzoblue.com/archives/2008/05/05/image_replac
— cimmanon 2012年

Answers:

46

css3有可能，但并非所有浏览器都支持

带背景剪辑：文本；您可以使用背景作为文本，但必须将其与页面背景对齐

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(){
  //Position of the header in the webpage
  var position = $("h1").position();
  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/

— 吉斯
source
你们太快了：D
— Gijs 2012年
太棒了！我将在回家后尽快测试自动对齐！谢谢！：D
— Love Dager 2012年
您可能需要根据情况更改代码，现在它可能会与其他元素发生冲突，并且此元素的编写速度非常快，如果您有任何疑问，我会听到它们
— Gijs 2012年
3
不要忽略答案，这是一个非常好的解决方案，但是它background-clip:text是仅Webkit的非标准选项。CSS3不允许使用text此属性的值（请参阅参考资料）。
— tanius
1
此技术使您可以查看文本通常所在的元素的背景。我正在寻找一种方法，以通过文本通常所在的位置查看文本元素下的内容。
— 文斯
49

尽管CSS可以做到这一点，但更好的方法是将内联SVG与SVG屏蔽一起使用。与CSS相比，此方法具有一些优点：

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>
展开摘要

— 网络提基
source
2
这似乎是当今唯一适用于跨浏览器的解决方案：IE11，FF，Chrome，Safari。并不需要图像作为背景，而是为网络上的问题提供了许多其他解决方案。
— TimoKähkönen2015年
1
从这个答案中得到启发，我制作了一个关键帧动画，其中白色圆角矩形上的透明SVG文本旋转。背景有文字和图像。去看看：jsbin.com/nipuqu/3（世界冠军赛即将来临））
— TimoKähkönen2015年
2
不错的解决方案，但是由于“选择文本并在页面上搜索”似乎是OP的要求，因此您可能需要包括零件的<text>外部<defs>。（顺便说一句，我不确定SE搜寻器如何处理defs中的SVG内容）。这是一种通过可怕的FF错误利用来保持OP所需的方法：jsfiddle.net/tfneqxxb
— Kaiido 2016年
如果文本是动态的怎么办？它不会自动调整宽度。
— Imran Bughio '16
1
@ImranBughio不，它不是。SVG文本的行为不像纯HTML文本。您需要定位它。有关更多信息，请参见此处
— web-tiki
16

尽管只有黑色背景，但在大多数现代浏览器上（边缘除外），一种可行的方法是使用

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

在您的文字元素中，然后将您想要的任何背景放在其后。乘法基本上将0-255的颜色代码映射为0-1，然后将其乘以其后面的内容，因此黑色保持黑色，而黑白则乘以1并有效变为透明。 http://codepen.io/nic_klaassen/full/adKqWX/

— 尼克
source
3
对于使用黑色的白色背景color-dodge，lighten或screen使用mix-blend-mode
— Imran Bughio
3

这是可能的，但到目前为止仅适用于基于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/

— 凯尔
source
绝招！但是，现在要正确对齐所有内容将非常
— 麻烦
是的，这是另一个问题。它仍在开发中，我衷心希望我们很快能看到这样的事情！:)
— 凯尔（Kyle）
另外，您始终可以在图像上的透明文本上叠加图层，以便仍可以选择它。但是我确信这对于SEO来说是不好的做法。隐藏的消息/关键字等。
— 凯尔（Kyle）
我确信它在Webkit浏览器中看起来非常不错，但是对于其他所有人来说，这是一个半透明的白色盒子，上面是一些草。
— cimmanon
1
啊，拜托大家……是的，我打算在生产中使用它。但是当然不是没有后援！@cimmanon
— Love Dager 2012年
2

我只是发现了一种新方法来解决这个问题，但我不确定它是如何工作的（如果有人想解释，请这样做）。

看起来效果很好，并且不需要双重背景或JavaScript。

这是代码： JSFIDDLE 

body {
  padding: 0;
  margin: 0;
}

div {
  background: url(http://www.color-hex.com/palettes/26323.png) repeat;
  width: 100vw;
  height: 100vh;
}

body::before {
  content: '$ALPHABET';
  left: 0;
  top: 0;
  position: absolute;
  color: #222;
  background-color: #fff;
  padding: 1rem;
  font-family: Arial;
  z-index: 1;
  mix-blend-mode: screen;
  font-weight: 800;
  font-size: 3rem;
  letter-spacing: 1rem;
}
<div></div>
展开摘要

— 克里斯·布朗尼
source
1

您可以使用倒排/负号/反向字体并将其与font-face="…"CSS规则一起应用。您可能必须使用字母间距来避免字母之间的白色小间隙。

如果您不需要特定的字体，这很简单。例如从此倒排字体集合中下载一个喜欢的字体。

如果您需要特定的字体（例如“ Open Sans”），这很困难。您必须将现有字体转换为反向字体。这可以通过Font Creator，FontForge等手动完成，但是我们当然需要一个自动化的解决方案。我还没有找到说明，但是有一些提示：

— 塔努斯
source
1

您可以使用myadzel的Patternizer jQuery插件在各种浏览器中实现此效果。目前，没有跨浏览器的方法可以仅使用CSS来做到这一点。

通过class="background-clip"在HTML元素中添加希望将文本绘制为图像图案的位置，可以使用Patternizer ，并在其他data-pattern="…"属性中指定图像。请参阅演示的源。Patternizer将创建一个带有图案填充文本的SVG图像，并将其添加到透明呈现的HTML元素中。

如果在问题的示例图像中，文本填充图案应该是背景图像的一部分，并且超出了“ patternized”元素，那么我会看到两个选项（未测试，我最喜欢的一个）：

  • 在SVG中使用遮罩而不是背景图像。就像在web-tiki的答案中一样，使用Patternizer仍会自动添加SVG的生成，并在顶部添加一个不可见的HTML元素，允许选择和复制文本。
  • 或使用图案图像的自动对齐。可以使用类似于Gijs的答案中的 JavaScript代码来完成。
— 塔努斯
source
1

只是把那个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;

    }
— 突袭
source
1

演示截图

我需要制作看起来与原始帖子完全一样的文本，但是我不能只是通过排列背景来伪造它，因为该元素后面有一些动画。似乎还没有人建议这样做，所以这就是我所做的：（试图使其尽可能地易于阅读。）

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中，将身体的背景设置为图像，然后观看魔术的发生！

— 佩夏
source
0

恐怕目前无法使用CSS。

最好的选择是仅使用图像（可能是PNG），然后在其上放置替代文字/标题文字。

或者，您可以使用SPAN或DIV，并将图像作为背景，其中包含您要用于SEO的文本，但在屏幕外将文本缩进。

— 比利·护城河
source
是啊，你说得对。我可能可以使用图像而不会失去SEO点，但是您仍然无法选择文本，在页面上搜索，链接会更加复杂，并且更新文本会
— 花费
0

mix-blend-mode 也有可能产生这种影响。

该mix-blend-modeCSS属性如何设定元素的内容应与元素的父的内容和元素的背景融为一体。

h1 {
background:white;
mix-blend-mode:screen;

/* demo purpose from here */
padding:0.25em;
mix-blend-mode:screen;
}


html {
background:url(https://i.picsum.photos/id/1069/367/267.jpg?hmac=w5sk7UQ6HGlaOVQ494mSfIe902cxlel1BfGUBpEYoRw)center / cover ;
min-height:100vh;
display:flex;
}
body {margin:auto;}
h1:hover {border:dashed 10px white;background-clip:content-box;box-shadow:inset 0 0 0 2px #fff, 0 0 0 2px #fff}
<h1>ABCDEFGHIJKLMNOPQRSTUVWXYZ</h1>
展开摘要

— 丙酸杆菌
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.