css - 色付きのボックス アウトラインを含む画像上の 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

あなたが望む効果のその絵では、そのようには機能しません。そこでは、画像が最下層、茶色のボックスが中間層、テキストが上になります。テキストが透明の場合、画像ではなく茶色のボックスが透けて見えます。

あなたが本当に望んでいるのは、テキスト型の穴をボックスに切り込むことだと思われますが、これは不可能だと思います。