白色文字在灰色背景中脱颖而出

Question

我有一个带有background-color: #FFFFFF和opacity: 0.08的div标签。它的内部是一个带有白色的span标签。如何使白色文本在父div的灰色背景中突出显示？看来我不能增加父母的不透明度

Answer 1

或者您应该可以使用rgba()表示法来获得这种效果：

div{
  background-color: rgba(255, 255, 255, 0.08);
}

span {
  color: #fff;
}

Answer 2

只需将其设置为深灰色即可

#background {
  background-color: #222222;
  text-align: center;
  vertical-align: middle;
}
#text {
  color: #FFFFFF;
  background-color: #444444;
}
body {
  font-family: sans-serif;
}

<div id="background" style="height: 100vh; width: 100vw;">
  <span id="text">Ngay Nhap Vien</span>
</div>

Answer 3

您还可以将文本阴影与RGBA 一起使用

HTML：

<div>
  <span>text</span>
</div>

CSS：

div {
  background-color: rgba(255, 255, 255, 0.08);
}

span {
  color: #FFF;
  text-shadow: 0px 1px 10px black;
  font-size: 30px;
}