html - 如何删除顶部的白色条？

<分区>

我的网站顶部出现空白(或栏)时遇到一些问题。

我试过按照其他一些帖子的建议使用不同的填充值和位置值，但似乎没有任何效果。

h1 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  top: 150px;
  left: 300px;
  z-index: 2;
  position: absolute;
  color: white;
  margin: 0;
}

h2 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  top: 230px;
  left: 300px;
  z-index: 2;
  color: white;
  font-weight: 100;
  font-style: italic;
}

img {
  z-index: 1;
  position: absolute;
  padding-top: 0;
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hayao Miyazaki Tribute Page</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="miyazaki.css">
</head>

<div id="main" class="image">
  <h1>Hayao Miyazaki</h1>
  <h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
  <img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>

<body>

  <script src="" async defer></script>
</body>

</html>

最佳答案

由于您已将position: absolute 赋予img，因此您应该指定图像的位置。

h1 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  top: 150px;
  left: 300px;
  z-index: 2;
  position: absolute;
  color: white;
  margin: 0;
}

h2 {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  position: relative;
  top: 230px;
  left: 300px;
  z-index: 2;
  color: white;
  font-weight: 100;
  font-style: italic;
}

img {
  z-index: 1;
  position: absolute;
  padding-top: 0;
  top: 0; /* added position */
}

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Hayao Miyazaki Tribute Page</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="miyazaki.css">
</head>

<div id="main" class="image">
  <h1>Hayao Miyazaki</h1>
  <h2> “They say that the best blaze burns brightest when circumstances are at their worst.”</h2>
  <img alt="Miyazaki Black and White" src="https://wallpaperaccess.com/full/244942.jpg">
</div>

<body>

  <script src="" async defer></script>
</body>

</html>

关于html - 如何删除顶部的白色条？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57290696/

上一篇：html - 未应用背景时，边框半径不起作用

下一篇：javascript - 如何使箭头键跳过禁用类的列表项？

javascript - React : on hover over component 1, 改变另一个组件的样式

html - 显示 : block. 垂直版本？

android - 仅使用 CSS 在移动设备上水平和垂直居中显示 div

html - 边缘浏览器 : Jerking movement at the end of transition only when skew and translate are used together

html - 如何在桌面上隐藏自定义背景(超过 992px 宽度)

jquery - 具有转换内容的图像悬停效果

javascript - 将 seriate Node.js 与 Web 应用程序连接的最佳方法是什么

html - CSS:渐变仅适用于背景的一半，但背景底色适用于整个页面？

javascript - 在scrollTop 中使用时，jQuery animate() 在 margin-left 上无法正常工作