将不透明度添加到行的背景色中

Question

enter image description here我想知道是否有人知道如何向该行的浅灰色背景色添加不透明度（半透明），因为我有一个背景图像，希望通过灰色看到。我已将我的html代码放在下面。

谢谢，谢谢。米歇尔

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="row text-center bg-light py-5">
  <div class="col-lg-7 col-xl-8 align-content-center">
    <h4 class="pt-3">See how your story comes to life!</h4>
  </div>
  <div class="col-lg-5 col-xl-4">
    <a href="https://youtu.be/2ErTF_AO7lk" target="_blank" class="btn btn-secondary btn-lg">Listen to a
                     free story.</a>
  </div>
</div>

Answer 1

最简单的方法是使用opacity CSS属性。

.some_class { opacity: 5 }

您可以在MDN上了解更多信息。

下一种方法是使用扩展的颜色定义。这可以是8个字符的十六进制代码或4个参数的rgba代码。

.some_color_hex { background-color: #cccccc88; }
.some_color_rgba { background-color: rgba(204, 204, 204, .5); }