带有彩色背景的不透明文本 - 仅限 CSS

Posted 2023-03-06

【中文标题】带有彩色背景的不透明文本 - 仅限 CSS

【英文标题】：opaque text with colored background - CSS only

【发布时间】：2015-06-07 17:16:11

【问题描述】：

div 是否可以有白色背景的不透明/透明文本。 (div1(+)

基本上我可以在第一个 div(div1) 后面有另一个彩色 DIV (div2) 并且文本将是它后面的 div (div2) 的颜色，纯粹通过没有 JS 的 CSS？。

【问题讨论】：

可以参考这个：***.com/questions/10835500/…

您想要剪切文本吗？基本上你通过顶部div上的文字字母看到底层div的背景？像这样css-tricks.com/image-under-text

这是您要找的吗？ （阅读答案）：***.com/questions/13932946/…

【参考方案1】：

如果我正确阅读了您的问题，您想要做的是使用文本穿透第一个 div 并显示其后面第二个 div 的颜色或图像。

仅使用 CSS 无法做到这一点。 （至少到今天）

我想你可能会觉得这很有用。

http://blog.ericzhang.com/punch-through-text-masks-with-css-and-html5/

【讨论】：

是这样的。所以不可能纯粹用CSS？谢谢你的回答

【参考方案2】：

像这样？

p
  color: rgba(0,0,0,0.5);

<p>Hello World!</p>

还是这样？

p
  opacity: 0.5;

<p>Hello World!</p>  

还是这样？

p 
  position: relative;
  color: rgba(255,255,255,0.5);
  font-size: 30px;

p:before 
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;

<p>Hello World!</p>

【讨论】：

我认为这不是 OP 所要求的。他希望纯色背景中的文本是透明的，这样您就可以通过文本看到纯色背后的内容

无论他想要什么，他都可以通过rgba 或opacity 来实现。我不认为这可以通过任何其他方法来完成。

是的，我想说 color:opacity() 所以只有文本是透明的，而不是整个 div。因此我只能看穿文本，但 div 的其余部分是纯色。