Opacity only in li and not in span

Question

Opacity only in li and not in span

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

I have the following code 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>

From the class produtoDesabilitado I enter a opacity of 0.5 in li as follows:

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

However, span with id="prodIndisponivel" can not "catch" this opacity. Along with this has another one however, the image I use is .jpg and you can not change it to .png to use a background with opacity to give that effect.

html html5 css css3 opacity

asked by anonymous 20.02.2018 / 18:25

2 answers

1

Just do this

.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>

link

20.02.2018 / 18:53

Find all occurrences of a pattern in a String Split a layout into 2 with different percentages

score 2 · Accepted Answer

You can apply the opacity .5 to all child elements of the div , less than the image and the text " Product not available ". For this you use the pseudo-class :not() :

Example:

.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>

I've already replied something similar this link , but not if it was blur and not opacity .