2

Eu tenho o seguinte código HTML:

<li class="item produtoDesabilitado" id="1028" style="border: 2px solid rgb(255, 255, 255) !important; height: 346px; padding-bottom: 22px;">
    <div class="product-image-wrapper" style="max-width:180px;">
        <a title="Raio de Sol " class="product-image">
            <img id="product-collection-image-1028" src="raio-sol.jpg" alt="Raio de Sol ">
            <span style="" id="prodIndisponivel" class="prodIndisponivel">Produto Indisponível</span>
        </a>
    </div> <!-- end: product-image-wrapper -->
    <h2 class="product-name"><a title="Raio de Sol ">Raio de Sol </a></h2>
    <div class="price-box">
        <span class="regular-price" id="product-price">
        <span class="price">R$46,80</span></span>
    </div>
    </div>
</li>

A partir da classe produtoDesabilitado eu insiro um opacity de 0.5 na li da seguinte forma:

.item.produtoDesabilitado {
    opacity: 0.5 !important;
}

Porém, o span com o id="prodIndisponivel" não pode "pegar" essa opacidade. Juntamente com isso tem outro porém, a imagem que utilizo é .jpg e não tem como alterar ela para .png para usar um background com opacidade para dar esse efeito.

7
  • cara de que input voce esta falando? Commented 20/02/2018 às 17:32
  • @JulioHenrique É span, errei na hora de digitar a pergunta e editei corrigindo o erro... Commented 20/02/2018 às 17:35
  • Mas qual o certo? Aplicar o css em qual/quais elementos? Commented 20/02/2018 às 17:39
  • 1
    Não aplique na LI pois se vc colocar opacity na LI vc não consegue mudar o Opacity de nada que está dentro dela!
    – hugocsl
    Commented 20/02/2018 às 17:40
  • 1
    Sobre a Imagem, qualquer imagem aceita opacidade independente da extensão dela. Se vc usar ela como Background de algum elemento basta colocar a opacidade no elemento em que o background foi aplicado.
    – hugocsl
    Commented 20/02/2018 às 17:42

2 Respostas 2

1

Você pode aplicar a opacidade .5 em todos os elementos-filhos da div, menos na que possui a imagem e o texto "Produto Indisponível". Para isso você usa a pseudo-classe :not():

Exemplo:

.item.produtoDesabilitado >*:not(.product-image-wrapper),
.item.produtoDesabilitado div .product-image img{
   opacity: .5;
}
<li class="item produtoDesabilitado" id="1028" style="border: 2px solid rgb(255, 255, 255) !important; height: 346px; padding-bottom: 22px;">
    <div class="product-image-wrapper" style="max-width:180px;">
        <a title="Raio de Sol " class="product-image">
            <img height="100" id="product-collection-image-1028" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Raio de Sol ">
            <span style="" id="prodIndisponivel" class="prodIndisponivel">Produto Indisponível</span>
        </a>
    </div> <!-- end: product-image-wrapper -->
    <h2 class="product-name"><a title="Raio de Sol ">Raio de Sol </a></h2>
    <div class="price-box">
        <span class="regular-price" id="product-price">
        <span class="price">R$46,80</span></span>
    </div>
    </div>
</li>

<li class="item" id="1028" style="border: 2px solid rgb(255, 255, 255) !important; height: 346px; padding-bottom: 22px;">
    <div class="product-image-wrapper" style="max-width:180px;">
        <a title="Raio de Sol " class="product-image">
            <img height="100" id="product-collection-image-1028" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Raio de Sol ">
            <span style="" id="" class="">Produto Disponível</span>
        </a>
    </div> <!-- end: product-image-wrapper -->
    <h2 class="product-name"><a title="Raio de Sol ">Raio de Sol </a></h2>
    <div class="price-box">
        <span class="regular-price" id="product-price">
        <span class="price">R$46,80</span></span>
    </div>
    </div>
</li>

Já havia respondido algo semelhante neste link, só que no caso era blur e não opacity.

4
  • Só estou tendo problemas em arrumar a opacidade com relação a imagem. Ou acaba colocando a opacidade em todas as imagens mesmo sem a classe .produtoDesabilitado ou ela acaba dando a opacidade também no span Commented 20/02/2018 às 18:26
  • È verdade. Não tinha pensado nisso. Perai que vou ver...
    – Sam
    Commented 20/02/2018 às 18:27
  • Dá uma olhada agora.
    – Sam
    Commented 20/02/2018 às 18:34
  • Agora deu certo, muito obrigado pela ajuda e atenção! Commented 20/02/2018 às 18:45
1

Basta fazer isso

.produtoDesabilitado {
  background: rgba(255,255,255,.5); /*Caso necessite  aplicar no background*/
  color: rgba(0,0,0,.5);
}
#prodIndisponivel {
  color: black;
}
<li class="item produtoDesabilitado" id="1028" style="border: 2px solid rgb(255, 255, 255) !important; height: 346px; padding-bottom: 22px;">
    <div class="product-image-wrapper" style="max-width:180px;">
        <a title="Raio de Sol " class="product-image">
            <img id="product-collection-image-1028" src="raio-sol.jpg" alt="Raio de Sol ">
            <span style="" id="prodIndisponivel" class="prodIndisponivel">Produto Indisponível</span>
        </a>
    </div> <!-- end: product-image-wrapper -->
    <h2 class="product-name"><a title="Raio de Sol ">Raio de Sol </a></h2>
    <div class="price-box">
        <span class="regular-price" id="product-price">
        <span class="price">R$46,80</span></span>
    </div>
    </div>
</li>

https://jsfiddle.net/thecodermarcelo/4hsdusdL/16/

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .