Question

该站点应该是具有几个固定背景图像的滚动视差网站。在这个特定的问题部分，我彼此相邻有两个div。最上面的一个具有固定的背景图片和h2文字。它应该用作包含我的信息文本的底部div的各种标题。出于某种原因，当我在信息文本div上设置背景颜色时，固定图像div的底部和信息文本div的顶部之间仍存在一个细小的空白。

我知道这样的事情可能是由利润下降导致的，所以我尝试了以下方法：

我尝试将页边距设置为0px（也为1px），取出所有页边距并改用填充，将所有填充均设置为0px和1px，更改图像大小，并更改图像高度。什么都没有。

.aboutme {
  background: url('../img/aboutme11.png') no-repeat;
  font: 'Century Gothic';
  position: relative;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  min-height: 25%;
  position: absolute;
  color: #fff;
  font-size: 800%;
}

.aboutmetxt {
  font-size: 150%;
  overflow: auto;
  padding: 0px 80px;
  background-color: #323232;
  color: #f2f2f2;
}

<div id="paralax1" class="aboutme">
  <h2 style="font-size:100%; padding-top:50px;">About Me
    <h2>
</div>

<div id="aboutme" class="aboutmetxt">
  <p> I am a self taught Front end developer and Graphic Designer Currently Located in Los Angeles California. I am pursuing an opportunity to began a career in Web Development. This responsive website site was one of my first projects. I built using the
    skills I have learned from programing in JavaScript, HTML and CSS. I Currently attend California State University Northridge and am finishing my BA in Graphis Design with a minor in Computer Science.     </p>
</div>

Answer 1

我使用您的代码创建了一个小提琴，并对其进行了一些编辑，希望对您有所帮助：

https://jsfiddle.net/1npm4g2j/18/

在大多数情况下，我只留下了您的html：

HTML

<div id="paralax1" class="aboutme" >
 <h2>About Me<h2>
</div>

<div id="aboutme" class="aboutmetxt">
 <p> I am a self taught Front end developer and Graphic Designer Currently Located
  in Los Angeles California. I am pursuing an opportunity to began a career in
 Web Development. This responsive website site was one of my first projects.
 I built using the skills I have learned from programing in JavaScript, HTML and CSS.
 I Currently attend California State University Northridge and am finishing my
 BA in Graphis Design with a minor in Computer Science.</p>
</div>

您对CSS所做的更改最多：

CSS

html{
 background-color: #323232;
 height: 110vh;

overflow: scroll;
}

.aboutme{
  position: fixed;
  display: block;

 top: 5%;
 left: 15%;

 background:url('../img/aboutme11.png') no-repeat;
 font:'Century Gothic';

 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
 background-attachment: fixed;

 min-height: 25%;
 color:#fff;
}

.aboutmetxt{
 font-size: 150%;
 overflow: auto;
 padding: 0px 80px;
 background-color: #323232;
 color:#f2f2f2;
}

h2{
 font-size: 126px;

}

Answer 2

因此，您的代码中存在许多错误，从关于我的文本中的拼写错误到使用错误的CSS属性。所以，我试图修复所有这些问题。

这是您的原始代码：https://jsfiddle.net/tvdchajo/1/

这是新代码（我知道大多数人只想要代码而不是解释。）

.aboutme {
  background: url('../img/aboutme11.png'), no-repeat;
  font-family: 'Century Gothic';
  position: relative;
  min-height: 25%;
  position: absolute;
  color: #fff;
  font-size: 800%;
}

.aboutmetxt {
  font-size: 150%;
  overflow: auto;
  padding: 0px 80px;
  color: #f2f2f2;
}

body {
  background-color: #323232;
}

<div id="paralax1" class="aboutme">
  <h2 style="font-size:100%; padding-top:50px;">
    About Me
  </h2>
</div>

<div id="aboutme" class="aboutmetxt">
  <p> I am a self taught Front-End Developer and Graphics Designer. I am currently located in Los Angeles, California. I am pursuing an opportunity to begin a career in Web Development. This responsive website site was one of my first projects. I built using the
    skills I have learned from programming in HTML, CSS and JavaScript. I'm currently attending 'California State University, Northridge' and I'm finishing my BA in Graphics &  Design with a minor in Computer Science. 
  </p>
</div>

因此，基本上，我在这里所做的只是为body {提供用于.aboutmetxt {的背景色。

这是我的网页版本的另一个JSFiddle：https://jsfiddle.net/tvdchajo/2/

对响应式网站使用VW和VH。它们是两个非常有用的CSS单元。

我的背景色CSS不会填满整个部分

2 个答案: