Letters getting transparent along with the footer

Question

I have a standard footer with a background image. This image is very green so I thought I’d make it a little transparent. but when I apply the effects of leaving the image transparent on the footer ends up applying to the things written on it too and I’m not managing to normalize.

Footer:

    <footer class="page-footer green lighten-1 s12">
      <div class="container" id="footer">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">Funerária Serluto</h5>
            <p class="white-text text-lighten-4" id="text-footer">
              "Há mais de 20 anos atendendo a comunidade da cidade e região
              firmamos o compromisso e respeito dando todo suporte necessário
              no momento mais difícil dando tranquilidade aos clientes"
            </p>
          </div>
          <div class="col l3 s12 right" id="social-footer">
            <h5 class="white-text">Contato</h5>
            <ul id="social">
              <li><a class="white-text" href="#!"><i class="fab fa-facebook-square fa-2x"></i> Facebook</a></li>
              <li><a class="white-text" href="#!"><i class="fab fa-instagram-square fa-2x"></i> Instagram</a></li>
              <li><a class="white-text" href="#!"><i class="fab fa-whatsapp-square fa-2x"></i> Whatsapp</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright" id="footer-copyright">
          <div class="row l12">
            <div class="l6 s12 center">
              Empresa - Cidade - Paraná - 2021
            </div>
            <div class="l6 center">
              Desenvolvido por: <a class="orange-text text-lighten-3" href="#">Fuulano da Silva</a>
            </div>
          </div>
      </div>
    </footer>

The CSS I’m using:

footer {
  background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/17d37af3-dcc5-44fe-954d-6d43e0b9daac/d3eovhx-7b7af2fb-d7c3-4e9e-9f7d-35a93aa20528.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvMTdkMzdhZjMtZGNjNS00NGZlLTk1NGQtNmQ0M2UwYjlkYWFjXC9kM2Vvdmh4LTdiN2FmMmZiLWQ3YzMtNGU5ZS05ZjdkLTM1YTkzYWEyMDUyOC5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.4fih7sVTiiF4n86z4WYTWvF19KY785wUC2lNHX09Xa8);
  opacity: 0.6;
  background-size: cover;
  background-position: center;
    display: flex;
    flex-direction: column;
    position: relative;
}

#footer {
  font-weight: bold;
  color: white;
}

#text-footer {
  color: white;
  backface-visibility: hidden;
  font-style: oblique;
  
}


#footer-copyright{
  background-color: rgb(51 51 51 / 45%);
}

Having this, everything works in perfect condition, the only problem is the letters that end up being transparent along with the background image I chose.

PS: merely illustrative image

Thank you in advance ;)