Question

首先，我尝试了添加3种不同的唯一方法背景的颜色，但现在它不允许我显示我的文本。

我尝试使用位置功能，但它不起作用，我不确定我做错了什么，或者有更好的方法来做3色背景？

* {
  margin: 0;
  padding: 0;
}

div {
  height: 1500px;
  position: relative;
}

.a {
  background: black;
}

.b {
  background: #1e1d1d;
}

.a:after,
.c:before,
.c:after {
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 200px;
  display: block;
  position: relative;
  font-family: Arial;
}

.a:after {
  background: black;
}

.c:before {
  background: #1e1d1d;
  right: 0;
  height: 100%;
}

.c:after {
  background: white;
  right: 0;
  height: 100%;
}

p {
  position: fixed;
  font-family: Arial;
  color: white;
}

<div class="a">
  <h1>DeadTreeStudios</h1>
</div>
<div class="b" style="position:absolute;">
  <h1>
    -I'm James, a freelance software developer & designer.
  </h1>

  <p>
    I've always had a keen interest in design and development. Allthough there is always alot to learn, my skills are broad: from front end to back end development to app development. I enjoy it all!
  </p>
  <p>
    I'm avaliable for remote work, or if you like to build somthing together, please get in touch.
  </p>
</div>
<div class="c"></div>
<article></article>

Answer 1

我只是摆弄你的东西。

我删除了

position:absolute;

内联风格.... 并给了.a和.b一种颜色，你看不到黑色的黑色....

https://jsfiddle.net/nabrzovg/

Answer 2

你的css有多处出错，打破了它，检查一下。

您不需要position: absolute来做这样的事情

height: 100vh; width: 100%;我确保一个部分从上到下从左到右填充屏幕请注意，您也可以使用width:100vw;水平填充它，但在某些情况下，它会添加一个水平滚动条

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  font-family: arial;
}

section {
  width: 100%;
  height: 100vh;
}

#first {
  background-color: black;
  color: white;
  padding-top: 48vh;
}

#second {
  background-color: grey;
  color: white;
}

#first h1 {
  text-align: center;
  vertical-align: middle;
}

＆＃13;

<section id="first">
  <h1>DeadTreeStudios</h1>
</section>

<section id="second">
  <h1>
    -I'm James, a freelance software developer &amp; designer.
  </h1>
  <p>
    I've always had a keen interest in design and development. Allthough there is always alot to learn, my skills are broad: from front end to back end development to app development. I enjoy it all!
    <br> I'm avaliable for remote work, or if you like to build somthing together, please get in touch.
  </p>
</section>

<section id="third">

</section>

＆＃13;

Answer 3

我真的不明白你在这里要做什么。我删除了所有位置并更改了颜色以查看发生了什么。

* {
    margin: 0;
    padding: 0;
}
div {
    height: 1500px;
}

.a {
    background: red;
}

.b {
    background: yellow;
    z-index:22;
}

.a:after, .c:before, .c:after {
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 200px;
    display: block;
    font-family: Arial;

}

.a:after {
    background: black;
}

.c:before {
    background: purple;
}

.c:after {
    background: white;
}
p{ 
    font-family: Arial;
    color: white;
}
h1{
    color: white;
}

Answer 4

我对此并不是特别肯定。但是，我认为你可以这样做的一种方法是用你想要的内容创建一个图像，然后把它放在你想要的地方。

如果这没有帮助，我很抱歉。

HTML- <h1>，<p>不会显示在我的</p> <div>中

4 个答案: