把div放在絕對img

我想在可變高度（絕對定位）的圖片下面放置一些文字我試着將它設置爲'相對'，但它不會有變量高度的影響，我真的想爲我的網站。把div放在絕對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>

，這裏是我的jsfiddle（你可能看不到的絕對定位相對差的作用，因爲你不能把它足夠寬） https://jsfiddle.net/goblincake/htgq07pb/

來源

2017-08-05 heartcube

它是確定使用一些JavaScript？ –

我不是很擅長js，因爲我對它很陌生，但我會盡我所能理解^^，所以是的 – heartcube

對不起，我無法得到預期的結果，因爲'clip：rect（0px，10000px ，400px，0px）;'property修剪'img'，但不是實際的高度。可能是更有經驗的人會幫助你... –

我想這就是你要做的...

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

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>

來源

2017-08-05 01:42:03 Droid

把div放在絕對img

回答

相關問題