[RESOLVIDO] Deixando apenas o bg-img opacity

[Jack Oliveira 1]

Ola boa noite

 

Galera preciso de uma ajuda de vocês aqui..

 

Estou tentando deixa a imagem de fundo do header com uma mascara negra transparente porem fica até a logo do site transparente e com mascara branca

que não é o meu objetivo..

 

e deixa apenas a imagem de fundo transparente e negra

 

Fiz no css da seguinte forma.

 

<style>
.bg-img{			
background-image: url('assets/bg/banner-fundo.png');
background-size: cover;

	position:relative;
	background-color: rgba(242,17,125,0.91);
	filter:opacity(alpha=60);
    -moz-opacity:0.9;
    opacity:0.6;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 0px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
  transition: 0.3s; }
			
</style>

A parte do html esta assim

 

            <header class="bg-img">

                <div class="container">
                    <div class="row">
                        <div class="col-lg-2 col-md-4">
                            <a href="./" class="logo"  style="border: 5px solid #ffffff; background-color: rgba(242,17,125,0.91)">
                                
                                <img src="assets/logo/minha-logo.png" alt="" title="">
                                
                            </a>
                        </div>
                        <div class="col-lg-9 col-md-8 dados">
                            
                          <h1 id="wa7_font">Minha Empresa</h1>
                            <h2 id="wa7_font">Minha Categoria</h2>
							<br>
                            <div class="telefones">
                                
                                <a href="tel:556699999999" class="fixo">
                                    <i class="fas fa-phone-volume"></i>
                                    <span>(66) 9999-9999</span>
                                </a>
                                
                                
                                <a href="tel:5566999999999" class="celular">
                                    <i class="fas fa-mobile-alt"></i>
                                    <span>(66) 9.9999-9999</span>
                                </a>
                                
                            </div>
                            
							<div class="endereco" id="wa7_font_letra">
								<p>
									<i class="fas fa-map-marker-alt"></i>
									Rua: Palmas, 2345, Centro - Sorriso/MT
								</p>
							</div>
                        </div>
                    </div>
                </div>
            </header>

Fico no guardo da ajuda ai

[wanderval 19]

Tente isso:

.bg-img {
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 0px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.bg-img:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('https://www.jetimob.com/blog/wp-content/uploads/2016/10/banner.png');
    background-size: cover;
    opacity:0.6;
}

Link: jsbin: https://jsbin.com/riziyawoqo/edit?html,css,output

[Jack Oliveira 1]

Em 04/03/2021 at 01:09, wanderval disse:

Tente isso:

.bg-img {
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 0px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.bg-img:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('https://www.jetimob.com/blog/wp-content/uploads/2016/10/banner.png');
    background-size: cover;
    opacity:0.6;
}

Link: jsbin: https://jsbin.com/riziyawoqo/edit?html,css,output

Opa boa tarde  @wanderval   muito bom ficou perfeito valeu ai tinha até deixando de lado kkkk