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

【问题标题】：opaque text with colored background - CSS only带有彩色背景的不透明文本 - 仅限 CSS
【发布时间】：2015-06-07 17:16:11
【问题描述】：

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

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

【问题讨论】：

可以参考这个：stackoverflow.com/questions/10835500/…
您想要剪切文本吗？基本上你通过顶部div上的文字字母看到底层div的背景？像这样css-tricks.com/image-under-text
这是您要找的吗？（阅读答案）：stackoverflow.com/questions/13932946/…

标签： html css opacity transparent

【解决方案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);
}

&lt;p&gt;Hello World!&lt;/p&gt;

还是这样？

p{
  opacity: 0.5;
}

&lt;p&gt;Hello World!&lt;/p&gt;

还是这样？

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;
}

&lt;p&gt;Hello World!&lt;/p&gt;

【讨论】：

我认为这不是 OP 所要求的。他希望纯色背景中的文本是透明的，这样您就可以通过文本看到纯色背后的内容
无论他想要什么，他都可以通过rgba 或opacity 来实现。我不认为这可以通过任何其他方法来完成。
是的，我想说 color:opacity() 所以只有文本是透明的，而不是整个 div。因此我只能看穿文本，但 div 的其余部分是纯色。