Question

div是否可以使用带有白色背景的不透明/透明文本。（DIV1（+）

基本上我可以在第一个div（div1）后面有另一个彩色DIV（div2）而文本将是它背后的div的颜色（div2）纯粹通过没有JS的CSS？

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

2 个答案: