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

Question

div 可以有 opaque/transparent 白色背景的文本吗？ (div1(+)

基本上我可以在第一个 div(div1) 后面有另一个彩色 DIV (div2) 并且文本将是div 背后(div2) 纯粹通过CSS 没有JS?.

Answer 1

像这样？

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>

Answer 2

如果我没看错你的问题，你想要做的是使用文本打穿第一个 div 并显示其后面第二个 div 的颜色或图像。

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

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

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

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

opaque text with colored background - CSS only

html

css

transparent

opacity