如何在HTML / CSS中穿透透明文本？ [英] How do I make punch-through transparent text in HTML/CSS?

问题描述

我有一个div，它有css background：rgba（0，0，0，0.85）; 。中心在那个div是页面的标题。我想让标题看透（挖空，穿透，但是你想调用它，即看到过去的div的背景黑色的页面的背景图像）。我这样做的唯一方法是使用一个带有div背景和透明文本的图像，并将标题部分分成块。

I have a div which has css background: rgba(0, 0, 0, 0.85);. Centered in that div is the title of the page. I want to make the title see through (knockout, punch-through, however you want to call it. i.e. see past the div's background black to the background image of the page). The only method of doing that that I have come up with is using an image with the div's background and transparent text and seperate the header part into blocks.

///////////////////////////////////////////////
//  (empty)    //  TITLE IMAGE //   (empty)  //
///////////////////////////////////////////////

问题是我不知道如何创建空的div，使得图像将保持居中（空的div需要在那里添加黑色背景）。有没有不同的方式来做透明文本，没有这个问题或一种方法来使图像div与空的div中心？

The problem is that I dont know how to create the empty divs such that the image will remain centered (the empty divs need to be there to add the black background). Is there a different way to either do the see through text that doesnt have this problem or a way to center the image div with the empty divs?

编辑：关于我想实现的效果的例子，看看这里：
http://www.showandtell-graphics.com/layer-knockout.html

For an example of the effect that I am trying to achieve, look here: http://www.showandtell-graphics.com/layer-knockout.html

推荐答案

你不能直接这样做;你应该使用图像为此，或者svg可能会做的伎俩，但这是一个地狱更复杂，浏览器并不都支持它。

you can not do this directly; You should use an image for this, or svg might do the trick but that's a hell of a lot more complicated and browsers do not all support it that well.

这篇关于如何在HTML / CSS中穿透透明文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！