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

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

Answer 2

您可以使用background: rgba(248,249,250,0.5) !important;获得样式。需要关键字!important来覆盖引导程序4中设置的样式。

body {
 background-color: red !important;
}

<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" style="background: rgba(248,249,250,0.5) !important;">
  <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>