html - html +css , 不透明度

Question

在这里我的css和html，如何使我opacity的background唯一而不影响我在容器内的话。

<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>

标签： htmlcss

Answer 1

您可以使用rgba 值并根据您的要求background-color调整不透明度级别。(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>