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

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

transparent text image css

jamesmstone · 技术社区 · 12 年前

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

我的尝试

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 回复 | 直到 12 年前

andi 12 年前

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

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

Anobik 12 年前

检查小提琴

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 12 年前

你可以试试这样的东西

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/

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前