html +css , opacity

Question

here my css and html, how to make my opacity on my background only with not effect my word inside container.

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

You're using bootstrap 3 or bootstrap 4.x? – Saravana Mar 15 '19 at 02:02 — Saravana, Mar 15 '19 at 02:02

score 0 · Answer 1 · answered Mar 15 '19 at 02:05

You can use background-color in rgba value and adjust the opacity(0.5) level based on your requirement.

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

html +css , opacity

1 Answers1