無法刪除英雄圖像底部的白色條紋

我正在嘗試爲網站創建英雄圖像，並且我在我的網站底部收到一個隨機白色條紋。這是HTML無法刪除英雄圖像底部的白色條紋

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: padding-box; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 

 
body { 
 
    margin: 0px 0px; 
 
}

<img src='https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg' />

來源

2017-04-04 JuniorVid

img元素是默認display:inline-block; vertical-align:baseline;

基線對齊是你所看到的。

因此，無論display:block;或vertical-align:top;：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"/> 
 
    <link rel='stylesheet' type="text/css" href="styles.css"/> 
 
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet"> 
 
</head> 
 
<body> 
 
    <img style="display:block" src='https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg'/> 
 
</body> 
 
</html

另一種選擇 - 將您的圖片設置爲背景：

body { 
 
     background: no-repeat url(https://static.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg); 
 
     background-size:cover; 
 
    }

<body>test</body>

來源

2017-04-04 02:16:18

無法刪除英雄圖像底部的白色條紋

回答

相關問題