代码之家 › 专栏 › 技术社区 › jamesmstone

CSS图像上的透明文本,带彩色方框轮廓

transparent text image css

jamesmstone · 技术社区 · 11 年前

在做了一些研究但没有发现任何结果后,我想知道是否有人知道一种方法,可以让一些文本在图像上透明,但周围有一个盒子,这样它仍然清晰可辨。

我的尝试

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;

}

预期效果

Desired effect

3 回复 | 直到 11 年前

andi 11 年前

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

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

Anobik 11 年前

检查小提琴

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

blackeyebeefhorsefly 11 年前

你可以试试这样的东西

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/

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前