html +css，不透明度[重复]答案

【问题标题】：html +css , opacity [duplicate]html +css，不透明度[重复]
【发布时间】：2019-08-06 01:12:15
【问题描述】：

这里是我的css 和html，如何在我的background 上创建我的opacity，而不影响我在容器内的话。

<style>
.x1 {
background-color: #ffb3b3;
opacity:0.1;
}
.x2 {
background-color: #ffe6e6;

}
.x3 {
background-color: #ffe6e6;

}
</style>

here my `html`

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2"><center><h1>Dashboard</h1></center></div>
    </div>
    <div class="row">
      <div class="col-sm-3 x1">
          asd
      </div>
      <div class="col-sm-1">

      </div>
      <div class="col-sm-3 x2">
          sadsd
      </div>
      <div class="col-sm-1">

      </div>
      <div class="col-sm-4 x3">
          sdas
      </div>

    </div>
    <div class="row">
      <div class="col-12">
    </div>
</div>

【问题讨论】：

您使用的是 bootstrap 3 还是 bootstrap 4.x？
maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

标签： html css

【解决方案1】：

您可以在 rgba 值中使用background-color，并根据您的要求调整 opacity(0.5) 级别。

.x1 {
     background-color: rgba(230, 140, 140, 0.5);
}

.x2 {
    background-color: #ffe6e6;
}

.x3 {
    background-color: #ffe6e6;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <center><h1>Dashboard</h1></center>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3 x1">
            asd
        </div>
        <div class="col-sm-1">

        </div>
        <div class="col-sm-3 x2">
            sadsd
        </div>
        <div class="col-sm-1">

        </div>
        <div class="col-sm-4 x3">
            sdas
        </div>

    </div>
    <div class="row">
        <div class="col-12">
        </div>
    </div>

【讨论】：