Why doesn't the rgba property work?

Question

css

I have scss and bootstrap in my project. When I try to use the rgba( ) property, zero response:

<div class="container-fluid">
    <div class="wrapper">
        <div class="row">
            <div class="col-lg-12 about">
                <p class="text-center">
                    Hello! Good to see You on my
                    <span>
                        protfolio
                    </span>
                    page.
                </p>
                <footer class="text-center">
                    You newer know who is going call first
                    <cite title="some title">
                        Newer....
                    </cite>
                </footer>
            </div>
        </div>
    </div>
</div>

$regular: OpenSans-Regular, sans-serif;
$italic: OpenSans-Italic, sans-serif;
$light: OpenSans-Ligth, sans-serif;
$bold: OpenSans-Bold, sans-serif;
body{

  background: url('/img/body-bg.png') repeat;
  font-family: OpenSans-Regular, sans-serif;
  color:#e8e8e8;
  font-weight: normal;
  font-size: 16px;
  min-width: 320px;
  position: relative;
  line-height: 1.6;
  overflow-x:hidden;
  
}
/**************************HEADER**********************/
.top-section{
  position: relative;
  background-color: #0c0c0c;
  .wrapper{
    margin: auto 220px;
    .logo{
      top:20px;
      position: absolute;
      vertical-align: middle;
    }
  }
}
.header-title{
  margin-left: 200px;
  li{
    font-size: 15px;
    line-height: 80px;
    margin-top: 10px;
    float: left;
    list-style: none;
    margin-left: 42px;
    font-family: $light;
    &:hover{
      cursor: pointer;
      color:#ff9800;
    }
  }
}

/**************************ABOUT**********************/

.about{
  min-height: 637px;
  font-family: $bold;
  background-image: url('/img/main.png');
  background-color: rgba(61 , 61 , 61 , 0.75);
  //opacity: 0.75;
    // color: #ffffff
  color: #000;
  
}

But when using opacity everything is ok, but darkens the content. What is the problem?

Answer 1

because you have background-image in front: url('/img/main.png'); and behind it is your rgba color. and you can't see it in the picture. if you want to make a translucent color overlay - make another div and put it in front of these and make it rgba