如何擺脫絕對定位覆蓋圖像下方的空白空間

我在圖像上使用絕對定位的div。該div有一個不透明度小於1的彩色背景（所以你可以看到圖像）。我的問題是，您可以在圖像下方看到一些空白區域。如何擺脫絕對定位覆蓋圖像下方的空白空間

#zero { 
 
    max-width: 450px; 
 
    margin: 0 auto; 
 
} 
 

 
#container { 
 
    position: relative; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#title { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0 bottom: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
    color: white; 
 
    background-color: red; 
 
    opacity: 0.67; 
 
}

<div id="zero"> 
 
    <div id="container"> 
 
    <img src="450x300.jpg"> 
 
    <h2 id="title">Title</h2> 
 
    </div> 
 
    <p>How to get rid of the white space below the image?</p> 
 
</div>

來源

2017-09-25 Wouter van der Zee

默認情況下，圖像被內聯呈現，就像一個字母。

您可以調整圖像的垂直對齊位置以將其放置在其他位置（例如中間位置）或更改顯示，使其不在內聯。

來源

2017-09-25 10:06:49 coder

是的，就是這樣。將img的樣式更改爲顯示：塊和白色空間消失。設計網站多年，現在仍然有麻煩:)。謝謝！ –

很好..享受編碼 – coder

標題有高度：100％，這意味着它將佔其父母身高的100％。剩下的元素然後重疊它。

您可以刪除標題中的高度：100％指令，讓佈局自動設置自身，或指定較低的百分比值並相應地調整字體大小。

#zero { 
 
    max-width: 450px; 
 
    margin: 0 auto; 
 
} 
 

 
#container { 
 
    position: relative; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#title { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0 bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    margin: 0; 
 
    color: white; 
 
    background-color: red; 
 
    opacity: 0.67; 
 
}

<div id="zero"> 
 
    <div id="container"> 
 
    <img src="450x300.jpg"> 
 
    <h2 id="title">Title</h2> 
 
    </div> 
 
    <p>How to get rid of the white space below the image?</p> 
 
</div>

來源

2017-09-25 10:25:26 Saucistophe

感謝您的評論。將img的顯示值更改爲block可以幫我解決這個問題。 –

如何擺脫絕對定位覆蓋圖像下方的空白空間

回答

相關問題