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

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