2

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

我的尝试

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;

}

所需效果

想要的效果

4

3 回答 3

4

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

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

于 2013-09-27T03:22:43.347 回答
1

检查小提琴

小提琴

这是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 位置。:)

于 2013-09-27T06:47:11.830 回答
1

你可以尝试类似的东西

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/

于 2013-09-27T03:23:37.433 回答