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

【问题标题】：CSS Transparent text on image with coloured box outline带有彩色框轮廓的图像上的 CSS 透明文本
【发布时间】：2013-10-03 05:48:37
【问题描述】：

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

我的尝试

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;

}

想要的效果

【问题讨论】：

@russell 我只是出于好奇询问是否可以使用 css 完成

标签： css image text transparent

【解决方案1】：

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

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

【讨论】：

【解决方案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/

【讨论】：

@andi：会的；你会得到主图像，里面有一个棕色的框，里面有一个与背景相同的图像的文本元素，移动到对齐，然后像引用的帖子一样被遮盖。
但这需要文本框处于已知位置。也许对 OP 没问题，不确定。
@andi 因为我没有想到需要这样做的项目。我只是好奇它是否可以做到。正如您指出的那样，如果您不知道文本将在图像上的位置，我想只有 css 是没有办法的

【解决方案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 处。 :)

【讨论】：

Anobik Dey，我没有得到你的破解！
@anobik 这样做基本上将文本的颜色设置为背景的图像
实际上的破解是它将文本的背景设置为与背景（大）图像相同。现在稍微定位文本背景图像，它将完全适合大图像.. 另一部分是在渲染小文本的图像中，您可以看到文本中的云可能与实际的云不匹配，但由于渲染区域是 smll 它也可以忽略不计。 :)