我如何卸下顶部的白色条

我在网站顶部有一些空白(或bar(的问题。

我尝试使用其他一些帖子建议的填充物值和位置值，但似乎没有任何作用。

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>

您应该将保证金0添加到身体类

CSS

body{
background: #fff;
margin: 0;
}

只需将top:0;添加到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; 
}

<!DOCTYPE html>
<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;。绝对定位的元素没有意识到周围发生的事情。当页面更改大小时，元素不会相互关联，而是相对于它们的容器及其设置的值而言对于顶部，左等。

了解更多信息：https：//www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/

在您的情况下，只需将该图像作为划分的背景，然后将文本H1，H2放入部门，然后将填充物(如果需要(将其添加到H1，H2以对齐。

相关内容

最新更新

热门标签：