有没有办法用CSS从背景效果中剪切出透明文本，如下图所示？
由于图像替换文本而失去所有宝贵的 SEO 将是可悲的。
我首先想到了阴影，但我想不出任何东西......
图片是网站背景，一个绝对定位的<img>标签
问问题
98412 次
14 回答
52
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>于 2012-12-18T12:49:35.020 回答
51
尽管这可以通过 CSS 实现，但更好的方法是使用带有SVG masking的内联 SVG。这种方法比 CSS 有一些优势：
- 更好的浏览器支持： IE10 +、chrome、Firefox、safari...
- 这不会影响 SEO，因为蜘蛛可以抓取 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>于 2015-04-20T12:18:52.793 回答
25
适用于大多数现代浏览器的一种方法是使用
background: black;
color: white;
mix-blend-mode: multiply;
对于黑色背景上的透明文本，或
background: white;
color: black;
mix-blend-mode: screen;
用于白色背景上的透明文本。
为了在 chrome 中工作，您还需要在html元素上设置任何背景颜色。
将这些样式放在您的文本元素上，然后在其后面放置您想要的任何背景。Multiply 基本上将 0-255 颜色代码映射到 0-1，然后将其乘以它后面的任何内容，因此黑色保持黑色，白色乘以 1 并有效地变为透明。对于这种情况，屏幕实际上是相反的。 http://codepen.io/nic_klaassen/full/adKqWX/
于 2016-01-30T22:27:15.463 回答
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;
}
于 2012-12-18T12:37:43.040 回答
3
我刚刚发现了一种新的方法来解决这个问题，我不完全确定它是如何工作的（如果其他人想解释，请做）。
它似乎工作得很好，并且不需要双重背景或 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>于 2018-01-10T06:30:44.557 回答
3
在不久的将来我们可以用它element()来实现这个
element() 函数允许作者将文档中的元素用作图像。当引用的元素改变外观时，图像也会改变ref
诀窍是创建一个带有文本的通用 div，然后element()结合使用mask.
这是一个基本示例，目前仅适用于最新版本的 Firefox。
#text {
font-size:35px;
font-weight:bold;
color:#000;
font-family:sans-serif;
text-transform: uppercase;
white-space:nowrap;
/* we hide it */
position:fixed;
right:200vw;
bottom:200vh
}
body {
background:url(https://picsum.photos/id/1018/800/800) center/cover;
}
.main {
margin:50px;
height:100px;
background:red;
-webkit-mask:
-moz-element(#text) center/contain no-repeat, /* this behave like a background-image*/
linear-gradient(#fff 0 0);
mask-composite:exclude;
}<div id="text">
You can put your text here
</div>
<div class="main">
</div>它将产生以下内容：
它是响应式的，因为我们依赖于基本的背景属性，并且我们可以使用基本的 CSS 轻松更新文本。
我们可以考虑任何类型的内容，也可以创建模式：
#text {
font-size:30px;
font-weight:bold;
color:#000;
font-family:sans-serif;
text-transform: uppercase;
white-space:nowrap;
padding:20px;
/* we hide it */
position:fixed;
right:200vw;
bottom:200vh
}
#text span {
font-family:cursive;
font-size:35px;
}
body {
background:url(https://picsum.photos/id/1018/800/800) center/cover;
}
.main {
margin:50px;
height:100px;
background:red;
-webkit-mask:
-moz-element(#text) 0 0/20% auto, /* this behave like a background-image*/
linear-gradient(#fff 0 0);
mask-composite:exclude;
}<div id="text">
Your <span>text</span> here
</div>
<div class="main">
</div>
为什么不使用一些动画来创建无限滚动文本：
#text {
font-size:30px;
font-weight:bold;
color:#000;
font-family:sans-serif;
text-transform: uppercase;
white-space:nowrap;
padding:20px 5px;
/* we hide it */
position:fixed;
right:200vw;
bottom:200vh
}
body {
background:url(https://picsum.photos/id/1018/800/800) center/cover;
}
.main {
margin:50px;
height:100px;
padding-right:calc(50% - 50px);
background:red;
-webkit-mask:
-moz-element(#text) 0 50%/200% auto content-box, /* this behave like a background-image*/
linear-gradient(#fff 0 0);
mask-composite:exclude;
animation:m 5s linear infinite;
}
@keyframes m{
to {-webkit-mask-position:200% 50%}
}<div id="text">
Srolling repeating text here
</div>
<div class="main">
</div>
于 2020-11-29T12:30:47.200 回答
2
我想你可以使用background-clip实现类似的东西，但我还没有测试过。
请参阅此示例：
http
://www.css3.info/wp-content/uploads/2008/03/webkit-backgroundcliptext_color.html
（仅限Webkit，我还不知道如何将黑色背景更改为白色）
于 2012-12-18T12:37:08.067 回答
2
只是把那个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;
}
于 2017-09-22T06:29:32.527 回答
1
这对我mix-blend-mode: color-dodge使用相反颜色的容器有用。
.main{
background: url('https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg');
height: 80vh;
width: 100vw;
padding: 40px;
}
.container{
background-color: white;
width: 80%;
height: 50px;
padding: 40px;
font-size: 3em;
font-weight: 600;
mix-blend-mode: color-dodge;
}
.container span{
color: black;
}<div class="main">
<div class="container">
<span>This is my text</span>
</div>
</div>于 2021-05-11T11:24:31.270 回答
1
您可以使用 myadzel 的Patternizer jQuery 插件跨浏览器实现此效果。目前，还没有跨浏览器的方法可以仅使用 CSS 来完成此操作。
您可以通过添加到希望将文本绘制为图像模式的 HTML 元素来使用 Patternizer class="background-clip"，并在附加data-pattern="…"属性中指定图像。请参阅演示的来源。Patternizer 将创建一个带有图案填充文本的 SVG 图像，并将其置于透明渲染的 HTML 元素上。
如果在问题的示例图像中，文本填充图案应该是超出“图案化”元素的背景图像的一部分，我会看到两个选项（未经测试，我最喜欢的第一个）：
- 在 SVG 中使用遮罩而不是背景图像。正如web-tiki 的回答一样，使用 Patternizer 仍然会自动生成 SVG 并在顶部添加一个不可见的 HTML 元素，允许文本选择和复制。
- 或者使用图案图像的自动对齐。可以使用类似于Gijs 答案中的JavaScript 代码来完成。
于 2015-10-17T15:05:47.467 回答
1
您可以使用倒置/负/反转字体并将其与font-face="…"CSS 规则一起应用。您可能必须使用字母间距来避免字母之间出现小的白色间隙。
如果您不需要特定的字体，那很简单。下载一个喜欢的，例如从这个倒排字体集合。
如果您需要特定的字体（例如“Open Sans”），那就很难了。您必须将现有字体转换为反转版本。这可以通过 Font Creator、FontForge 等手动实现，但我们当然想要一个自动化的解决方案。我还没有找到相关说明，但有一些提示：
- 如何将位图字体转换为 TrueType 字体（还有另一种方法）。首先使用 ImageMagick 命令将字体字形渲染为高分辨率光栅图像并反转它们，然后使用上述说明将它们转换回 TrueType 字体。
- 是否可以使用 FontForge 或其他 PGM 反转字体？
- 创建反向（黑底白字）字体
于 2015-10-17T15:23:47.933 回答
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 中，将身体的背景设置为您的图像，然后观看魔术发生！
于 2016-11-23T08:34:21.633 回答
1
mix-blend-mode也有可能达到那种效果。
CSS 属性设置元素的
mix-blend-mode内容应该如何与元素的父元素的内容和元素的背景混合。
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>于 2020-08-25T15:47:03.283 回答
-1
Not possible with CSS just now I'm afraid.
Your best bet is to simply use an image (probably a PNG) and and place good alt/title text on it.
Alternatively you could use a SPAN or a DIV and have the image as a background to that with your text you want for SEO purposes inside it but text-indent it off screen.
于 2012-12-18T12:27:11.510 回答