我想知道是否有任何方法可以将 100% 透明度应用于文本，以便我们可以在文本中的字符内看到页面的背景图片。
即想象一下我有一个白色背景的<div>，以及<body> 上的背景图像。我想在<div> 中设置文字，这样<body> 上的背景图像就可以通过文字看到，尽管<div> 上的背景是白色的。
我可能会使用倒置字体，但如果有的话，我希望有更好的方法。
【问题讨论】：
标签： css transparency opacity
它必须是动态的吗？做到这一点的唯一方法是使用具有透明度的图像（GIF 或更好的 PNG）。
我不确定这是否是您想要的，但无论如何都会解释一下。
情况：你有一个非普通的背景，你想通过你的文字被看到。
解决方案：没有 CSS 可以解决这个问题。您必须使用可靠的图像编辑器来创建一个带有文本的图层，以及另一个将是您的文本的底片的图层
这可以让您获得一些有趣的效果，但如果您希望它是动态的，则必须在运行服务器端生成图像。
这种诡计目前在纯 CSS 中是不可能的（在 Javascript 中可能是可能的）。
看到Paul's find on webkit 让我开始思考如何在 Firefox、Opera 和 IE 中伪造这种行为。到目前为止，我在 Firefox 上使用 canvas 元素很幸运，我正在尝试在 filter:progid:DXImageTransform.Microsoft 中找到一些行为。
到目前为止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>
【讨论】：
我不太清楚你在问什么（100% 透明意味着某些东西是不可见的，不可见的文本通常不是一个好主意），但总的来说：
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% 的不透明度。
我认为支持rgba 颜色值的浏览次数比opacity 略少。
【讨论】：
啊——如果你说的是“穿透”透明度，不，CSS 不会这样做。
WebKit 除外（Safari 和 Chrome 中的渲染引擎），它具有完全自定义的、由 Dave-Hyatt 制作的、甚至在 CSS-3 中都没有的属性值, -webkit-background-clip: text;.
除 Safari 和 Chrome 外，没有其他浏览器支持。
【讨论】：
filter:progid:DXImageTransform.Microsoft 中有一些你可以使用的东西。在 FF 上，您也许可以做一些 Canvas 或 SVG 技巧。
你可以花时间用 InkScape 和 IcoMoon 制作你自己的字体，制作一个负面的剔除字体，然后你的字母就可以看到了！我将这种技术用于一些看槽图标。
【讨论】：
为什么不尝试将 DIV 的背景图片设置为完全透明的 GIF？
【讨论】：
使用没有背景的 .png 是一个好方法。在 Photoshop 中，您可以保存为网络。
或在css中：
#div
{
background:transparent;
color:whatever;
}
【讨论】：