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

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

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

Answer 2

您可以尝试类似

的内容

background: url(images/wood_texture.jpg) repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;

但这个东西仍然是一个工作标准！查看实施资源，如果您还有其他需要，请告诉我！ ：）

<强>资源 http://www.silenceit.ca/2011/03/11/css-gradients-and-webkit-image-masks-on-text/

Answer 3

检查小提琴

fiddle

这是css

.gradient4 {
-moz-border-radius: 15px;
border-radius: 15px;
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
background: url(http://www.silenceit.ca/wordpress/wp-content/uploads/2011/03/wood_texture.jpg) repeat;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

.test{
    background-color:red;
}
.outer{
    height:400px;
    width:400px;
    background: url(http://www.silenceit.ca/wordpress/wp-content/uploads/2011/03/wood_texture.jpg)
}

但是这里有一个crck你需要将红色div文本的背景设置在你想要文本的x和Y相同的位置。 ：）