Question

我正在尝试使背景不透明但使文本的颜色保持不变。

.overview {
  background: gray;
  width: 45%;
  opacity: 0.3;
  margin-left: auto;
  margin-right: auto;
  font-size: large;
  border-radius: 8px;
}

.overview p {
  text-align: center;
  color: white;
}

<div id="overview" class="overview">
  <p>
    Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah

  </p>
</div>

但是文本和背景颜色都变暗了

Answer 1

您的background should be an RGBA color，应用不透明度适用于div

background-color:rgba(128,128,128,0.3);

Answer 2

@wtreston 以下代码应为：

.overview {
    background: gray;
    width: 45%;
    opacity: 0.3%;
    margin-left: auto;
    margin-right: auto;
    font-size: large;
    border-radius: 8px;

}

.overview p {
    text-align: center;
    color: white;
}

<div id="overview" class="overview">
        <p>
                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah
                Blah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blahBlah blah

        </p>
    </div>

我可能对您的问题有误解。

希望这会有所帮助！

更改背景颜色的不透明度，但不更改文本

2 个答案: