我可以用 CSS 字体做敲除/穿透透明吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2289159/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I do knock-out/punch-through transparency with CSS fonts?
提问by Roch
I would like to know if there is any way I can apply 100% transparency to text so that we can see the background picture of the page within the characters in the text.
我想知道是否有任何方法可以将 100% 透明度应用于文本，以便我们可以在文本中的字符中看到页面的背景图片。
i.e. imagine I've got a <div>with a white background, and a background image on <body>. I'd like to set the text inside the <div>so that the background image on <body>can be seen through the text, despite the white background on the <div>.
即想象我<div>有一个白色背景，和一个背景图像<body>。我想在里面设置文本，<div>以便<body>可以通过文本看到背景图像，尽管<div>.
I could probably use an inverted font but I would prefer a better way to do it if there is one.
我可能可以使用倒置字体，但如果有的话，我更喜欢更好的方法。
回答by Esteban Küber
Does it have to be dynamic? The only way to do that is with an image with transparency (GIF or, better, PNG).
它必须是动态的吗？唯一的方法是使用具有透明度的图像（GIF 或更好的 PNG）。
I'm not sure if this is what you want, but will explain it anyway.
我不确定这是否是您想要的，但无论如何都会解释。
Situation: you have a non plain background that you want to bee seen through your text.
情况：你有一个非普通的背景，你想通过你的文本看到它。
Solution: no CSS is coming to the rescue for this. You'll have to use your trusty image editor to create a layer with text, and another layer that will be the negative of your text
解决方案：没有 CSS 可以解决这个问题。您必须使用值得信赖的图像编辑器来创建一个带有文本的图层，以及另一个将作为文本底片的图层
This could allow you to have some interesting effects, but if you want it to be dynamic, you'll have to generate the images on the fly serverside.
这可以让您获得一些有趣的效果，但如果您希望它是动态的，则必须在服务器端生成图像。
This kind of trickery is currently impossible with pure CSS (might be possible with Javascript).
这种诡计目前在纯 CSS 中是不可能的（使用 Javascript 可能）。
Edit
编辑
Seeing Paul's find on webkitgot me thinking on how to fake that behavior in Firefox, Opera and IE. So far I've had good luck using the canvaselement on Firefox, and I'm trying to find some behavior in filter:progid:DXImageTransform.Microsoft.
看到Paul 在 webkit 上的发现让我开始思考如何在 Firefox、Opera 和 IE 中伪造这种行为。到目前为止，我canvas在 Firefox 上使用该元素很幸运，我正在尝试在filter:progid:DXImageTransform.Microsoft.
So far with canvas, this is what I did
到目前为止canvas，这就是我所做的
<html>
<body>
<canvas id="c" width="150" height="150">
</canvas>
<script>
ctx = document.getElementById("c").getContext("2d");
// draw rectangle filling the canvas element
ctx.fillStyle = "red";
ctx.fillRect(0,0,150,150);
// set composite property
ctx.globalCompositeOperation = 'destination-out';
// the text to be added now will "crop out" the red rectangle
ctx.strokeText("Cropping the", 10, 20);
ctx.strokeText("red rectangle", 10, 40);
</script>
</body>
</html>
by using a detination-out compositingand drawing text on the canvas.
回答by Paul D. Waite
I'm not exactly clear what you're asking (100% transparency means that something's invisible, and invisible text isn't generally a great idea), but in general:
我不太清楚你在问什么（100% 透明度意味着某些东西是不可见的，不可见的文本通常不是一个好主意），但总的来说：
The CSS
opacityproperty applies to an entire element, not just its text. So if you have this HTML:<div class="opacity-50"> This is a div with a background colour and 50% opacity </div>And this CSS:
.opacity-50 { background: #ccc; color: #000; opacity: 0.5; }Then both its background and its text will have 50% opacity.
rgbacolour values allow you to specify semi-transparent colours. So, if you have this HTML:<div class="text-opacity-50"> This is a div with semi-transparent text </div>And this CSS:
.text-opacity-50 { background: #ccc; color: rgba(0,0,0,0.5); }Then only its text will have 50% opacity.
CSS
opacity属性适用于整个元素，而不仅仅是其文本。所以如果你有这个 HTML：<div class="opacity-50"> This is a div with a background colour and 50% opacity </div>这个CSS：
.opacity-50 { background: #ccc; color: #000; opacity: 0.5; }然后它的背景和文本都将具有 50% 的不透明度。
rgba颜色值允许您指定半透明颜色。所以，如果你有这个 HTML：<div class="text-opacity-50"> This is a div with semi-transparent text </div>这个CSS：
.text-opacity-50 { background: #ccc; color: rgba(0,0,0,0.5); }那么只有它的文本会有 50% 的不透明度。
I think rgbacolour values are supported by slightly fewer browses than opacity.
我认为rgba浏览器支持的颜色值比opacity.
回答by Paul D. Waite
Ah — if you're talking about “punch-through” transparency, no, CSS doesn't do this.
啊——如果你在谈论“穿透”透明度，不，CSS 不会这样做。
Except for WebKit(the rendering engine in Safari and Chrome), which has a totally custom, made-up-by-Dave-Hyatt, not-even-in-CSS-3 property value, -webkit-background-clip: text;.
除了 WebKit（Safari 和 Chrome 中的渲染引擎），它有一个完全自定义的、由 Dave-Hyatt 组成的、not-even-in-CSS-3 属性值-webkit-background-clip: text;.
No other browser other than Safari and Chrome supports it.
除了 Safari 和 Chrome 之外，没有其他浏览器支持它。
回答by Joris
You can spent the time to make your own font with InkScape and IcoMoon and make a negative knocked out font, then your letters can be see trough! I used this technique for some see trough Icons.
你可以花时间用 InkScape 和 IcoMoon 制作你自己的字体，制作一个负面的淘汰字体，然后你的字母就可以看到了！我将这种技术用于一些查看槽图标。
回答by Douglas Held
Why not try to set the DIV's background image to a completely transparent GIF?
为什么不尝试将 DIV 的背景图像设置为完全透明的 GIF？
回答by user2116899
Using a .png without background is a good method. In Photoshop you can save for the web.
使用没有背景的 .png 是一个很好的方法。在 Photoshop 中，您可以为 Web 保存。
or in css:
或在 css 中：
#div
{
background:transparent;
color:whatever;
}
