我想在透明背景上制作不透明文字

Question

在CSS中是否可以使文本的背景透明但文本保持不变（不透明）？

我尝试过：

p {
  position: absolute;
  background-color: blue;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: black;
  filter: alpha(opacity=100);
  opacity: 1;
}

<p>
  <span>Earth is a planet</span>
</p>

Answer 1

是的，有可能，而且您不需要额外的<span>来获得它。

使用rgba表示法，您可以设置背景色的Alpha值

HTML

<p>Earth is a planet</p>

CSS

p {
  position: absolute;
  background-color: rgba(0,0,255,0.6); /* r=0 g=0 b=255 alpha=60% */
  color: black;
}