带有彩色框轮廓的图像上的CSS透明文本

Question

在做了一些研究但一无所获之后，我想知道是否有人知道一种方法可以让一些文本在图像上是透明的，但周围有一个框，因此它仍然清晰可见。

我的尝试

HTML

<img src="http://images2.fanpop.com/images/photos/8000000/Mountains-mountains-and-waterfalls-8031277-2560-1817.jpg"/>

<p> this is some transparent text with a brown background </p>

CSS

img{
  width:500px;
}
p{
  top:100px;
  left:20px;
  position:absolute;
  display:box;
  color:rgba(0,0,0,0);
  background:brown;

}

期望的效果

Answer 1

在您想要的效果图片中，它不会像那样工作。在那里，图像在底层，棕色框在中间层，文本在顶层。如果文本是透明的，则会显示棕色框，而不是图像。

看起来你真正想要的是在一个盒子上切一个文字形状的孔，我认为这是不可能的。