put div unter absolute img

Ich versuche, etwas Text unter einem Bild mit einer variablen Höhe (absolut positioniert) Ich habe versucht, es auf "relativ", aber dann wird es nicht die Wirkung der variablen Höhe, die ich wirklich will für meine Seite.put div unter absolute img

CSS

header{ 
 
    background-color: #f49b42; 
 
} 
 

 
body{ 
 
    font-family: Lora; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
img{ 
 
    width: 100%; 
 
    height: auto; 
 
    clip: rect(0px,10000px,400px,0px); 
 
    position: absolute; 
 
} 
 

 
h1{ 
 
    font-family: Pacifico; 
 
    margin: 0 20px; 
 
} 
 

 
p#feelgood{ 
 
    position: absolute; 
 
    color: wheat; 
 
    margin: 80px 0; 
 
    text-align: center; 
 
    width: 100%; 
 
    text-shadow: 0px 1px #4c2816; 
 
} 
 

 
p{ 
 
    margin: 20px; 
 
    text-align: justify; 
 
} 
 

 
span{ 
 
    font-family: Pacifico; 
 
}

<body> 
 

 
<header> 
 
    <h1> Music </h1> 
 
    <img src="https://images.pexels.com/photos/542515/pexels-photo-542515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"> 
 
    <p id="feelgood"> makes me feel good</p> 
 
</header> 
 

 
<div class="music-quotes"> 
 
<p> One good thing about music, when it hits you, you feel no pain.<br> 
 
<span>Bob Marley</span> </p> 
 

 
<p> If music be the food of love, play on. <br><span>William Shakespeare</span></p> 
 

 
<p> Where words fail, music speaks. <br><span>Hans Christian Andersen</span></p> 
 

 
<p> Music is the movement of sound to reach the soul for the education of its virtue. <br><span>Plato</span> 
 
</p> 
 

 
<p>Music can change the world because it can change people. <br><span>Bono</span></p> 
 
</div> 
 

 

 
</body>

hier ist mein jsfiddle (Sie möglicherweise nicht die Wirkung der Differenz der absoluten Positionierung relativ zu sehen, weil Sie es nicht weit genug bekommen können) https://jsfiddle.net/goblincake/htgq07pb/

Quelle

2017-08-05 heartcube

Ist es in Ordnung, einige Javascript zu verwenden? –

Ich bin nicht sehr gut in js, da ich ziemlich neu bin, aber ich versuche mein Bestes zu verstehen ^^, so yeah – heartcube

Sorry, ich kann nicht das erwartete Ergebnis erhalten, weil 'clip: rect (0px, 10000px , 400px, 0px); 'property trimmt den' img', aber nicht seine tatsächliche Höhe. Vielleicht ist jemand erfahrener wird Ihnen helfen ... –

Ich denke, das ist, was du für ...

https://jsfiddle.net/htgq07pb/5/

wolltest

header{ 
 
    background-color: #f49b42; 
 
} 
 

 
body{ 
 
    font-family: Lora; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
img{ 
 
    width: 100%; 
 
    height: auto; 
 
    clip: rect(0px,10000px,400px,0px); 
 
    position: relative; 
 
} 
 

 
h1{ 
 
    font-family: Pacifico; 
 
    margin: 0 20px; 
 
} 
 

 
p#feelgood { 
 
    position: absolute; 
 
    display: inline-block; 
 
    color: wheat; 
 
    margin: -40% 0; 
 
    text-align: center; 
 
    width: 100%; 
 
    text-shadow: 0px 1px #4c2816; 
 
} 
 

 
p{ 
 
    margin: 20px; 
 
    text-align: justify; 
 
} 
 

 
span{ 
 
    font-family: Pacifico; 
 
}

<body> 
 

 
<header> 
 
    <h1> Music </h1> 
 
    <img src="https://images.pexels.com/photos/542515/pexels-photo-542515.jpeg?w=940&h=650&auto=compress&cs=tinysrgb"> 
 
    <p id="feelgood"> makes me feel good</p> 
 
</header> 
 

 
<p> One good thing about music, when it hits you, you feel no pain.<br> 
 
<span>Bob Marley</span></p> 
 
<p> If music be the food of love, play on. <br><span>William Shakespeare</span></p> 
 
<p> Where words fail, music speaks. <br><span>Hans Christian Andersen</span></p> 
 
<p> Music is the movement of sound to reach the soul for the education of its virtue. <br><span>Plato</span> 
 
</p> 
 
<p>Music can change the world because it can change people. <br><span>Bono</span></p> 
 

 
</body>

Quelle

2017-08-05 01:42:03 Droid

put div unter absolute img

Antwort

Verwandte Themen