8

我想知道是否有任何方法可以将 100% 透明度应用于文本，以便我们可以在文本中的字符中看到页面的背景图片。

即想象我有<div>一个白色背景和一个背景图像<body>。我想在里面设置文本，以便可以通过文本看到<div>背景图像，尽管.<body><div>

我可能可以使用倒置字体，但如果有的话，我更喜欢更好的方法。

4

6 回答 6

10

它必须是动态的吗？做到这一点的唯一方法是使用具有透明度的图像（GIF 或更好的 PNG）。

我不确定这是否是您想要的，但无论如何都会解释它。

情况：你有一个非普通的背景，你想通过你的文本被看到。

解决方案：没有 CSS 可以解决这个问题。您必须使用可靠的图像编辑器来创建一个带有文本的图层，以及另一个将是您的文本的底片的图层

这可以让您获得一些有趣的效果，但如果您希望它是动态的，则必须在运行服务器端生成图像。

这种诡计目前在纯 CSS 中是不可能的（在 Javascript 中可能是可能的）。

编辑

看到Paul 在 webkit 上的发现让我开始思考如何在 Firefox、Opera 和 IE 中伪造这种行为。到目前为止，我canvas在 Firefox 上使用该元素很幸运，我正在尝试在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>

通过在. _ _canvas

于 2010-02-18T14:49:38.830 回答
6

我不太清楚你在问什么（100% 透明度意味着某些东西是不可见的，不可见的文本通常不是一个好主意），但总的来说：

  1. CSSopacity属性适用于整个元素，而不仅仅是其文本。所以如果你有这个 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% 的不透明度。

  2. 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.

于 2010-02-18T14:21:05.353 回答
4

啊——如果你在谈论“穿透”透明度，不，CSS 不会这样做。

除了 WebKit（Safari 和 Chrome 中的渲染引擎），它有一个完全自定义的、由 Dave-Hyatt 制作的、甚至不是 CSS-3 属性值，-webkit-background-clip: text;.

除了 Safari 和 Chrome 之外，没有其他浏览器支持它。

于 2010-02-19T00:49:49.803 回答
1

你可以花时间用 InkScape 和 IcoMoon 制作你自己的字体，然后制作一个负面的剔除字体，然后你的字母就可以看到槽了！我将这种技术用于一些看槽图标。

于 2013-12-04T09:34:00.200 回答
0

为什么不尝试将 DIV 的背景图像设置为完全透明的 GIF 呢？

http://www.pageresource.com/dhtml/csstut9.htm

于 2011-07-08T10:24:52.997 回答
0

使用没有背景的 .png 是一个好方法。在 Photoshop 中，您可以保存为网络。

或在 CSS 中：

#div
{
    background:transparent;
    color:whatever;

}
于 2013-02-27T19:39:22.620 回答