Hintergrundfarbe der übergeordneten übereinstimmenden Höhe des Kindes mit negativen oberen und unteren Rändern

Attached ist ein Bild des gewünschten Affektes, den ich anstrebe. Ich versuche dies mit negativen Margen zu machen. Ich brauche das Kindelement, um über das Elternelement oben und unten hinaus zu expandieren. Das Problem besteht darin, dass die Hintergrundfarbe des übergeordneten Elements der Höhe des untergeordneten Elements entspricht. Dies ist eine responsive Website und ich kann die absolute Positionierung des untergeordneten Elements nicht verwenden, da die Höhe des untergeordneten Elements (und damit des übergeordneten Elements) variabel ist. Jede Hilfe wäre sehrHintergrundfarbe der übergeordneten übereinstimmenden Höhe des Kindes mit negativen oberen und unteren Rändern

geschätzt werden

Im Anschluss an mein 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>

Quelle

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>

Quelle

2017-03-29 19:47:17

Danke für die Antwort. Leider kann ich das Headerbild nicht absolut positionieren, da es auch reaktionsfähig ist; So wird die Höhe des übergeordneten Wrappers und seine Größe variabel sein. – masterShake

@masterShake keine Ahnung, was Sie brauchen, fügte ich ein img für meinen Code –

Ihre angepasste Lösung ist genau das, was ich gesucht habe. ich danke dir sehr! – masterShake

-1

Sie können :after und :before pseudo-Elemente in der #parentid Ändern Sie die background-color und verwenden Sie dann negative m Argin in #child.

Überprüfen dieser Ausschnitt aus:

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>

Quelle

2017-03-29 18:52:02 Subgeo

Vielen Dank für die Antwort! Das wird definitiv für den unteren Bereich funktionieren. Aber oben muss ich das Kind erscheinen, um oben auf dem Bild zu liegen. – masterShake

Nun, Sie haben es nicht in der Antwort angegeben, also ... – Subgeo

Hintergrundfarbe der übergeordneten übereinstimmenden Höhe des Kindes mit negativen oberen und unteren Rändern

Antwort

Verwandte Themen