问顶部的图片和页眉可以覆盖我的背景图片，但下面的其他图片和页眉不能
EN

Stack Overflow用户

提问于 2021-04-21 06:46:18

回答 1查看 33关注 0票数 0

嗨，我是HTML和CSS的初学者，我在学校学习，我遇到了一些奇怪的事情？我的第一个标题和前两个图像，我的背景图像也在其中，正在检查背景图像，但是下面的其余图像和标题没有检查背景图像，这创造了一个巨大的空间。我不知道我在做什么..。对于背景图像，我之前使用了一个：：，这样我就可以让它成为半透明的，但是一旦我这样做了，其他的头文件就在背景图像之间创建了一个空间。我也不太确定如何解释这一点。There's a huge space between the vines and the next header right below it and I want the header to go over top of the vines like the 'Home' header忽略空白；这不是来自网站，屏幕截图不是很好，对不起。

这是我的代码，我没有包括其他的标题和段落，因为它真的很长，对不起。不过，如果需要的话，我可以把它包括进来。另外，如果这不是问题，谁能告诉我如何消除背景图像和页面顶部之间的小空间？如果需要，我可以尝试更详细地说明，我只是不知道还能放些什么或解释些什么。非常感谢:)

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap" rel="stylesheet">  
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
  </head>
  <body style="background-color:#52B69A;">
    <script src="script.js"></script>
    <div class= bg-img>
    <img class=poopoo src=http://herschelandmorris.weebly.com/uploads/1/2/4/8/12482634/_8172691.png width="90">&ensp;&ensp;&ensp;&ensp;<h1 class=block >‧₊˚Home˚₊‧</h1>&ensp;&ensp;&ensp;<img class= ihateithere src=https://i.pinimg.com/originals/b9/71/d3/b971d38635b85b11a51915cfb9ead30b.png width= "90">
    </div>
    <br>
    <h2 class= h2 style="text-indent: 10px"><i>‧₊˚What is the Legend of Zelda?˚₊‧</i></h2><br>
   &ensp;&ensp;&ensp;<img style="border-color: #D9ED92; border-width: 5px;border-style: solid;" src=https://i.pinimg.com/originals/d9/7e/cc/d97ecc64e6e15e5042aeb177ec49c602.jpg width="350">&ensp;&ensp;&ensp;&ensp;&ensp;<img  class=toplink src=https://2.bp.blogspot.com/-9gAb_OOBJu8/XC_p48I1tfI/AAAAAAAAAi8/poOknwCpkicCnnVwe6tY_m_JSFf2Vq8MgCK4BGAYYCw/s1600/b94968899328eca265ed8ed722ec37bb.png width="90">
<p>paragraph<br> <br> paragraph <br> <br> paragraph <br> <br>paragraph</p>
    <h2 class=h2 style="text-indent: 10px" align=right><i>‧₊˚The Complete Timeline˚₊‧</i></h2> &ensp;&ensp; <br>
    &ensp;&ensp;&ensp;<img align=right src=https://i.pinimg.com/originals/b9/71/d3/b971d38635b85b11a51915cfb9ead30b.png width="100" class=ee > &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;<img align=right style="border-color: #D9ED92; border-width: 5px;border-style: solid;" src=https://static0.srcdn.com/wordpress/wp-content/uploads/2020/09/Zelda-Breath-Of-The-Wild-Hyrule-World-Overlook.jpg?q=50&fit=crop&w=740&h=370 width="350">&ensp;&ensp;&ensp;
    <br clear="all">
    <p>paragraph<br> <br>paragraph<br><br> paragraph <br><br> paragraph <br><br> paragraph <br><br> paragraph </p>
    <h2 class= h2 style="text-indent: 10px"><i>‧₊˚Quick BOTW Guide˚₊‧</i></h2> <br>
    &ensp;&ensp;&ensp;<img class=padding src=https://2.bp.blogspot.com/-bcpyysPfwro/XC_p48iBWjI/AAAAAAAAAi4/b-VBy9-uJdk6JcSkn4jsr1Fldr99wnvVgCK4BGAYYCw/s1600/Elma_Figurine.png width="100"> &ensp;&ensp;&ensp;&ensp; <img  style="border-color: #E6F3BA; border-width: 5px;border-style: solid;" src=http://oyster.ignimgs.com/mediawiki/apis.ign.com/the-legend-of-zelda-hd/4/4f/MB_Lynel_Parry.jpg width="350"> 
    <p>paragraph <br><br> paragraph <br><br> 
    <p>paragraph</p>
    <ul>
      <li>list:
      <li> no 1
      <li> no 2
        <ul>
         <li> a
         <li> b
         <li> c 
        </ul>
    </ul>
    <p>paragraph <br><br>
    paragraph <br><br>
    &ensp;&ensp; paragraph <br><br>
    &ensp;&ensp; paragraph <br><br>
    &ensp;&ensp; paragraph<br><br>
    &ensp;&ensp; paragraph  <br><br>
    &ensp;&ensp; paragraph<br><br>
    &ensp;&ensp; paragraph <br><br>
    &ensp;&ensp; paragraph <br><br>
    &ensp;&ensp; paragraph <br><br>
    &ensp;&ensp; paragraph <br><br>
    &ensp;&ensp; paragraph </p>
      <ul>
        <li> no 1
        <li> no 2
        <li> no 3
      </ul>
    <p>paragraph<br><br>
    paragraph</p> 
      <ul>
        <li>1
        <li>2
        <li>3
        <li>4
      <ul> <br>
     </p> <br>`


h1 {
  font-family: 'Nunito', sans-serif;  
  background:#B5E48C;
  line-height: 50px;
  width: 158px;
  padding: 15px;
  position: relative;
}
.h2 {
  font-family: 'Nunito', sans-serif;
  background-color: #99D98C;
  position: relative;
}
p {
  font-family: 'Lato', sans-serif;
}
ul {
  font-family: 'Lato', sans-serif;
}
div {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  }

.ee {
  margin-top: 85px;
  padding: 10px;
  padding-left: 40px;
}
.padding {
  padding: 10px;
}
.mm {
  padding: 20px;
}
.eat {
  padding:20px;
}
.toplink {
  padding-bottom: 20px
}
.silent {
  align-items: center;
  padding-left: 7px;
  padding-right: 7px;
}
.img-container {
  text-align: center;
  display: block;
}
.poopoo {
  transform: scaleX(-1);
}
.bg-img {
  position: relative; 
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bg-img::before {  
  content: "";
  background-image: url("https://www.vippng.com/png/full/41-414789_green-plant-plants-png-pngstickers-border-watercolour-leaves.png");
  position: absolute; 
  height: 100%; 
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  background-position: 50% 50%; 
  -webkit-background-size: cover; 
  -moz-background-size: cover; 
  -o-background-size: cover; 
  background-size: cover;
  opacity: 0.75 ;
  }
.ihateithere {
  position: relative;
}

css

html

回答 1

Stack Overflow用户

发布于 2021-04-21 07:59:02

您必须将其余的标题和图像代码放在.bg-img div标记内，因为背景在.bg-img div标记内，而标题和图像代码在外部。

我在position、z-index上对一些元素进行了额外的更新来更新您的代码。我还向.bg-img添加了flex-direction: column，以使内容拖入行中。

h1 {
  font-family: 'Nunito', sans-serif;
  background: #B5E48C;
  line-height: 50px;
  width: 158px;
  padding: 15px;
  position: relative;
}

.h2 {
  font-family: 'Nunito', sans-serif;
  background-color: #99D98C;
  position: relative;
}

p {
  font-family: 'Lato', sans-serif;
}

ul {
  font-family: 'Lato', sans-serif;
}

div {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ee {
  margin-top: 85px;
  padding: 10px;
  padding-left: 40px;
}

.padding {
  padding: 10px;
}

.mm {
  padding: 20px;
}

.eat {
  padding: 20px;
}

.toplink {
  position:relative;
  z-index:1;
  padding-bottom: 20px
}

.silent {
  align-items: center;
  padding-left: 7px;
  padding-right: 7px;
}

.img-container {
  text-align: center;
  display: block;
}

.poopoo {
  transform: scaleX(-1);
}

.bg-img {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.bg-img:before {
  content: "";
  background-image: url("https://www.vippng.com/png/full/41-414789_green-plant-plants-png-pngstickers-border-watercolour-leaves.png");
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  background-position: 50% 50%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  opacity: 0.75;
}

.ihateithere {
  position: relative;
  z-index: 1;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
</head>

<body style="background-color:#52B69A;">
  <script src="script.js"></script>
  <div class="bg-img">
    <img class="poopoo" src=http://herschelandmorris.weebly.com/uploads/1/2/4/8/12482634/_8172691.png width="90">&ensp;&ensp;&ensp;&ensp;
    <h1 class="block">‧₊˚Home˚₊‧</h1>&ensp;&ensp;&ensp;<img class="ihateithere" src="https://i.pinimg.com/originals/b9/71/d3/b971d38635b85b11a51915cfb9ead30b.png" width="90">
    <br>
    <h2 class="h2" style="text-indent: 10px"><i>‧₊˚What is the Legend of Zelda?˚₊‧</i></h2><br> &ensp;&ensp;&ensp;
    <img style="position:relative;z-index:1;border-color: #D9ED92; border-width: 5px;border-style: solid;" src=https://i.pinimg.com/originals/d9/7e/cc/d97ecc64e6e15e5042aeb177ec49c602.jpg width="350">&ensp;&ensp;&ensp;&ensp;&ensp;<img class="toplink" src="https://2.bp.blogspot.com/-9gAb_OOBJu8/XC_p48I1tfI/AAAAAAAAAi8/poOknwCpkicCnnVwe6tY_m_JSFf2Vq8MgCK4BGAYYCw/s1600/b94968899328eca265ed8ed722ec37bb.png" width="90">
  </div>
</body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67187217

复制

相似问题

问顶部的图片和页眉可以覆盖我的背景图片，但下面的其他图片和页眉不能
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问顶部的图片和页眉可以覆盖我的背景图片，但下面的其他图片和页眉不能EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问顶部的图片和页眉可以覆盖我的背景图片，但下面的其他图片和页眉不能
EN