在做了一些研究但一无所获之后,我想知道是否有人知道一种方法可以让一些文本在图像上是透明的,但周围有一个框,因此它仍然清晰可见。
我的尝试
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;
}
期望的效果
最佳答案
在您想要的效果图片中,它不会像那样工作。在那里,图像在底层,棕色框在中间层,文本在顶层。如果文本是透明的,则会显示棕色框,而不是图像。
看起来你真正想要的是在一个盒子上切一个文字形状的孔,我认为这是不可能的。
关于带有彩色框轮廓的图像上的CSS透明文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19042139/