CSS透明文本与固定背景包围文字

Question

CSS透明文本与固定背景包围文字

5

我正在寻找一种纯CSS方法来创建一个透明的文本框(div、p等)，其中文本周围填充了颜色，但文本本身不会被填充（即采用rgba/hsla实现透明效果）。

可以想象一个div，其文本颜色为rgba .2 alpha级别，背景颜色为实色，而文本中不能看到背景实色。当然，使用多个堆叠的div/block的解决方案也是可以接受的，但应该允许悬停状态，以便可以切换开/关效果。使用此方法，可以将此div应用于图像或其他可以透过字母看到的div之上。

因此，CSS/html总是在背景上应用文本（称为背景的原因），因此，在文本颜色上使用透明颜色只会显示背景颜色。我尝试创建具有大箱阴影的背景，以查看是否计算不同，但它没有（也想不出其他方法）。

与其用我有限的CSS知识唠叨，我认为你已经明白了重点，所以给我最好的建议吧！我希望这在Chrome和Firefox上都能正常工作。

Stacked Overflow不允许我放置jsfiddle而不附带代码，我不想在这里放置无意义的代码，只是为了链接到“起点”代码。相反，这里有一张图片解释明显的想法：

- PLCcory

1

@OP StackOverflow不允许您在没有代码的情况下放置jsFiddle链接的原因是他们希望您在此处发布您的代码。请在此处内联发布您的代码，并附加jsFiddle链接。谢谢。 - Asad Saeeduddin

1

http://css-tricks.com/image-under-text/ - nice ass

1

相关的编程内容-虽然它涉及SVG，但并非重复：https://dev59.com/h3bZa4cB1Zd3GeqPIalE - SW4

+1 对于使用 "thru" 要比 "ugh" 好得多。（除了一个好问题） - bjb568

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SW4 · Accepted Answer

演示 Fiddle

您可以仅使用CSS实现此操作，但支持有限。

您可以设置-webkit-background-clip属性和-webkit-text-fill-color为transparent。

但是，这只适用于Webkit浏览器。

e.g.:

div {
   color: white;  /* Fallback */
   background: url(yourimage.png) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

点击这里获取更多关于background-clip的背景知识。

background-clip CSS属性指定一个元素的背景（颜色或图片）是否延伸到边框下面。

如果没有背景图片，当边框有透明区域（因为border-style）或部分不透明区域时，此属性仅具有视觉效果；否则，边框将覆盖差异。

或者，您可以使用SVG，参考此问题。