title: How to change opacity on children
body: <p>Can I show a low color on a <code>div</code> so that the image would be clearer like on the first image?</p>
  <p>I covered the image with a <code>div</code> that has opacity so that <code>div</code> will be shown while the image is showing.</p>
  <p>Please tell me if there is a way without using opacity.</p>
  <p>This is what I want as result:</p>
  <p><a href="https://i.stack.imgur.com/pCL8I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pCL8I.png" alt="enter image description here" /></a></p>
  <p>How can I define the opacity to not affect the children elements? Here is what I want it to be:</p>
  <p>I tried <code>color: rgb(255, 255, 255);</code> but it shows me the same result.</p>
  <p>Here is what it is right now, it does not change the opacity on children.</p>
  <p><a href="https://i.stack.imgur.com/G5DCM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G5DCM.png" alt="enter image description here" /></a></p>
  <p><strong>my CSS</strong></p>
  <pre><code>.image-cover{ 
    background:#858C94;
    opacity:0.7;
    width: 60px;
    height: 60px;
    margin-top: -66.8px;
    position: relative;
  }
  .mediv{
    color: rgb(255, 255, 255);
  }
  </code></pre>
  <p><strong>my HTML</strong></p>
  <pre><code>&lt;div class='row image-cover'&gt;
    &lt;div className='mediv'&gt;2&lt;/div&gt;
    &lt;div className='mediv' &gt;bk52&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>