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

Question

我想知道是否有人知道如何将opacity （半透明）添加到此行的background-color （浅灰色）中。我想通过灰色查看background-image。我在下面添加了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个字符的HEX代码或RGBA代码。

.some_color_hex { 
    background-color: #cccccc88; 
}

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