CSS combinações

[jonhyhvaftn]

Olá a todos.

Tenho o seguinte código:

<div class="swiper-slide dark" style="background-image: url('images/novas imagens/Header/header01.jpg');">
 <div class="container clearfix">
 <div class="slider-caption slider-caption-center">
 <h2 data-caption-animate="fadeInUp">Lorem Ipsum</h2>
 <p data-caption-animate="fadeInUp" data-caption-delay="200">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
 </div>
 </div>
 </div>

Quero que a div swiper-slide , ou seja, a primeira que define o background tenha 0.5 de opacidade.

Mas, quero que a div slider-caption não tenha.

Como posso fazer a combinação em CSS? Sem ter de estar a tirar opacidade de cada imagem, dado que são mais de 200

Obrigado

Edited February 19, 2016 at 04:09 PM by jonhyhvaftn

[HappyHippyHippo]

Quero que a div swiper-slide , ou seja, a primeira que define o background tenha 0.5 de opacidade.

Mas, quero que a div slider-caption não tenha.

Como posso fazer a combinação em CSS?

não podes, o css é "cascade" e a opacidade é propagada para todos os elementos "filhos" e não existe maneira de mudar isso

terás de ter uma estrutura diferente de HTML, algo como:

<div id="parent" style="position: relative;">
 <div id="transparent" style="position: absolute; opacity: 0.5"></div>
 <div id="image" style="position: absolute"></div>
</div>

[ruicosta.web]

Há quem diga que é possível:

http://biostall.com/only-applying-a-css-opacity-to-the-parent-container/

[HappyHippyHippo]

Há quem diga que é possível:

http://biostall.com/only-applying-a-css-opacity-to-the-parent-container/

viste bem o código ?

não leias o que ele escreveu no fim porque é estúpido,

olha para o código e diz onde é que desmente a minha afirmação "que um elemento contido num outro com transparência, terá sempre transparência"

não só isso, como compara o exemplo que apresentei ... sem mais comentários