问题描述
我有一个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?
编辑:关于我想实现的效果的例子,看看这里:
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中穿透透明文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!