无法删除英雄图像底部的白色条纹

我正在尝试为网站创建英雄图像，并且我在我的网站底部收到一个随机白色条纹。这是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

无法删除英雄图像底部的白色条纹

回答

相关问题