How to set opacity for the second block?

Question

css

Hi all!
There are two divs - block and inside it another div -block2. By setting the opacity property of block, block2 also takes that value. And I don't need block2 transparency. How to solve the problem?
The code.
Thank you.

<div class="block">
   <div class="block2">    
   </div>
</div>

<code lang="css">
.block{
    background: #4E4E4E;
    width: 200px;
    height: 200px;
    opacity: 0.5;
    border: 1px solid #636363;
  }
.block2{
    background: red;
    width: 90px;
    height: 90px;
    outline: 1px solid #fff;
    margin: 50px;
}
</code>

Answer 1

Set a semi-transparent background if possible.
Using the rgba function or a single pixel image.

.block{
    background: rgba(78, 78, 78, 0.5);
    width: 200px;
    height: 200px;
    border: 1px solid #636363;
  }