Question

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

即。想象一下，<div>有一个白色背景，<body>背景图像。我想在<div>内设置文字，以便<body>上的背景图片可以在文字中看到，尽管<div>上有白色背景。

我可能会使用倒置字体，但如果有的话，我希望有更好的方法。

Answer 1

它必须是动态的吗？唯一的方法是使用透明图像（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>

使用detination-out compositing和drawing text on the canvas。

Answer 2

我不清楚你在问什么（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略少的浏览支持。

Answer 3

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

除了WebKit （Safari和Chrome中的渲染引擎），它具有完全自定义，由Dave-Hyatt制作，甚至不在CSS3中的属性值，-webkit-background-clip: text;。

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

Answer 4

您可以花时间使用InkScape和IcoMoon制作自己的字体并制作负面翻译字体，然后您的字母可以看到低谷！我使用这种技术看到了一些图标。

Answer 5

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

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

Answer 6

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

或在css中：

#div
{
    background:transparent;
    color:whatever;

}

我可以使用CSS字体进行淘汰/穿透透明度吗？

6 个答案:

修改