couleur d'arrière-plan du parent correspondant hauteur de l'enfant avec les marges supérieure et inférieure négatives

Ci-joint est une image de l'affect souhaité que je vais chercher. J'essaie de le faire avec des marges négatives. J'ai besoin de l'élément enfant pour dépasser l'élément parent en haut et en bas. Le problème est que la couleur d'arrière-plan de l'élément parent correspond à la hauteur de l'élément enfant. C'est un site responsive et je ne serai pas capable d'utiliser le positionnement absolu de l'élément enfant car la hauteur de l'enfant (et donc l'élément parent) sera variable. Toute aide serait grandement appréciéecouleur d'arrière-plan du parent correspondant hauteur de l'enfant avec les marges supérieure et inférieure négatives

Après mon code ...

body { 
 
    background-color:#DBD9DB; 
 
} 
 

 
#headerImage { 
 
    margin: 0; 
 
} 
 

 
#headerImage img { 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
#parent { 
 
\t background-color: #fff4d7; 
 
} 
 

 
#child { 
 
\t background:none #FFF; 
 
\t margin:-46px auto -38px; 
 
\t position:relative; 
 
\t text-align:center; 
 
\t width:80%; 
 
}

<body> 
 
    <div id="headerImage"> 
 
    <img src="http://fpoimg.com/300x250?text=Preview" width="300" height="250" /> 
 
    </div> 
 
    <div id="parent"> 
 
    <div id="child"> 
 
     <h1>Title</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus sapien a nulla finibus mattis id quis est. Proin malesuada magna vitae orci maximus, ac viverra felis iaculis. Curabitur lacinia commodo est et auctor. Suspendisse potenti. Nulla scelerisque metus et leo cursus, non auctor turpis fermentum.</p> 
 
    </div> 
 
    </div> 
 
</body>

Source

2017-03-29 masterShake

body { 
 
    background-color: #DBD9DB; 
 
} 
 

 

 
#parent { 
 
    background-color: #fff4d7; 
 
} 
 

 
#parent:before, 
 
#parent:after { 
 
    content: " "; 
 
    display: block; 
 
    height: 50px; 
 
    background-color: blue; 
 
} 
 

 
#child { 
 
    background: none #FFF; 
 
    position: relative; 
 
    text-align: center; 
 
    width: 80%; 
 
    margin: -50px auto; 
 
} 
 

 
.parent { 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 0 auto 0 auto; 
 
    background-color: #b5b5b5; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.clearfix { 
 
    overflow: auto; 
 
    zoom: 1; 
 
}

<body> 
 
    <div class="parent clearfix"> 
 
    <div class="css-slideshow"> 
 
      <div id="parent"> 
 
         <img class="clearfix" src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" /> 
 
     <div id="child"> 
 
     <h1>Title</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus sapien a nulla finibus mattis id quis est. Proin malesuada magna vitae orci maximus, ac viverra felis iaculis. Curabitur lacinia commodo est et auctor. Suspendisse potenti. 
 
      Nulla scelerisque metus et leo cursus, non auctor turpis fermentum.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
</body>

Source

2017-03-29 19:47:17

Merci pour la réponse. Malheureusement je ne peux pas positionner absolument l'image d'en-tête car elle sera également sensible; donc sa, et la hauteur de son wrapper parent sera variable. – masterShake

@masterShake aucune idée de ce dont vous avez besoin, j'ai ajouté un img pour mon code –

votre solution ajustée est exactement ce que je cherchais. Merci beaucoup! – masterShake

-1

Vous pouvez utiliser :after et :before pseudo-éléments dans le #parentid pour changer le background-color, puis utiliser négatif m argin en #child.

Vérifiez cet extrait sur:

body { 
 
    background-color:#DBD9DB; 
 
} 
 

 
#headerImage { 
 
    margin: 0; 
 
} 
 

 
#headerImage img { 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
#parent { 
 
    background-color: #fff4d7; 
 

 
} 
 
#parent:before, #parent:after{ 
 
    content: " "; 
 
    display: block; 
 
    height: 50px; 
 
    background-color: blue; 
 
} 
 

 
#child { 
 
    background:none #FFF; 
 
    position:relative; 
 
    text-align:center; 
 
    width:80%; 
 
    margin: -50px auto; 
 
}

<body> 
 
    <div id="headerImage"> 
 
    <img src="http://fpoimg.com/300x250?text=Preview" width="300" height="250" /> 
 
    </div> 
 
    <div id="parent"> 
 
    <div id="child"> 
 
     <h1>Title</h1> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus sapien a nulla finibus mattis id quis est. Proin malesuada magna vitae orci maximus, ac viverra felis iaculis. Curabitur lacinia commodo est et auctor. Suspendisse potenti. Nulla scelerisque metus et leo cursus, non auctor turpis fermentum.</p> 
 
    </div> 
 
    </div> 
 
</body>

Source

2017-03-29 18:52:02 Subgeo

Merci beaucoup pour la réponse! Cela fonctionnera certainement pour le fond. Mais en haut, j'ai besoin que l'enfant apparaisse sur le dessus de l'image. – masterShake

Eh bien, vous ne l'avez pas spécifié dans la réponse, alors ... – Subgeo

couleur d'arrière-plan du parent correspondant hauteur de l'enfant avec les marges supérieure et inférieure négatives

Répondre

Questions connexes