28172 sujets

CSS et mise en forme, CSS3

[Résolu] Inherit de background d'ancêtre pour div blur

Bonjour,

Je souhaite placer une div de contenus avec une fond blur, sur un fond-image remplissant la totalité du viewport, tel que cela est décrit par zFunx à cette adresse sur codepen.
Le problème est que ce code repose (marche) sur peu de divs imbriquées, avec des 
background: inherit;
fonctionnant puisque les liens de parentalité sont directs, sans intermédiaire quoi.. ce qui n'est pas le cas de mon arborescence qui comporte bien plus de divs intermédiaires. En effet sur la base du codepen, mon code ressemblerait plutôt à ça :


<div class="blurred-bg-container">

  <div class="content"><!-- div en + -->
   <div class="content"><!-- div en + -->
    <div class="content"><!-- div en + -->

      <div class="content">
        <div class="text">
          <h1>Lorem ipsum dolor sit amet </h1>
        </div>
       <div class="blur"></div>
      </div>

   </div>
  </div>
</div>

</div>


Or dans ce cas (sans doute pas rare...), un 
background: inherit;
sur la div 
.content
ne fonctionne plus puisque 
.blurred-bg-container
n'est plus son parent direct.

D'où ma question :
par quel moyen pourrait-on retrouver le fonctionnement du inherit, cette fois entre divs à parentalités éloignées.. ? jQuery... ?

Je cherche... sans résultat pour l'instant donc je suis preneur de toute piste !
Merci !
Bonjour Thomasc,
Si je me trompe pas voici un exemple pour .blur :

.blurred-bg-container {  height: 100vh; /* =h */}
.blurred-bg-container .blur ,
.blurred-bg-container {
  background: url(https://web.opendrive.com/api/v1/download/file.json/NTlfMTMzMTgyNzlf?inline=1);
  background-size: cover;
}
.blurred-bg-container .blur {
  height: 100vh; /* h */
  width: 166.667%; /* (100/cw) x 100% */
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(
    -10%,
    -30%
  ); /* - [cl - (cw/2)] % ,  -[ct - (ch/2)] % */
  filter: blur(20px);
  z-index: -1;
}

Modifié par aliasdmc (16 Oct 2018 - 21:02)
Bonjour aliasdmc,

Merci beaucoup pour votre aide qui effectivement est bien fonctionnelle ! Je pensais avoir testé cette hypothèse mais j'avais du faire une erreur quelque part.. bref..
Dans mon cas l'équivalent du ".blurred-bg-container" est géré par javascript (fullPage.js) mais aussi à 100vh donc ça le fait.

Merci aussi d'avoir au passage explicité le calcul du .blur translate que j'avais du mal à faire correspondre avec le résultat donné..

Votre réponse fut donc richement utile, merci encore !
Sujet clos
Aller à