html - 修改 “ALIEN Deviation” 笔 - - HTML Canvas 问题

Question

总结

我的屏幕底部有一个不合适的矩形红色框。

背景

在我的本地开发工作区使用 Chrome 的开发者工具，我将问题的根源确定为一个相对较新引入的 canvas 元素，我并不完全理解它。我探索了 w3school’s doc连同 Chris Coyier’s main blog post on HTML canvas我真的不明白在这种情况下如何正确使用 Canvas 元素。

我的代码

Here is my reduced test case on CodePen.

这是 HTML:

 <div class="title">

<!-- Original concept borrowed from Marco Dell'Anna in a CodePen titled ALIEN - Deviation of microcosm, source: https://codepen.io/plasm/pen/JNPXxg  -->

<h1>LOREM IPSUM</h1>

<h3><a href="#">@ hyperlink 1</a></h3> 

<h3><a href="#">@ hyperlink 2</a></h3> 

<h3><a href="#">@ hyperlink 3</a></h3> 

<h3><a href="#">@ hyperlink 6</a></h3> 

  <br />
   <br />
    <br />

<h3><a href="#">~ hyperlink  @ random ~</a></h3> 
</div>

这是 CSS:

@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600");
.more-pens {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 10;
  font-family: "Montserrat";
  font-size: 12px;
}

a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active {
  font-family: "Montserrat";
  font-size: 12px;
  text-decoration: none;
  background: #212121;
  padding: 4px 8px;
  color: #f7f7f7;
}
a.white-mode:hover, a.white-mode:link:hover, a.white-mode:visited:hover, a.white-mode:active:hover {
  background: #edf3f8;
  color: #212121;
}

* {
  box-sizing: border-box;
}


body {
  margin: 0;
  padding: 0;
  /*overflow: hidden;
  width: 100%;*/
  height: 100%;
  background: crimson;
  color: white;
  /*position: relative;*/
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  height: 100% !important;
  right: 0;
  bottom: 0;
  width: 100% !important;
  z-index: -1;
}

.title {
  z-index: 10;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-family: "Montserrat";
  text-align: center;
  width: 100%;
  padding: 50px 30px;
}
.title h1 {
  position: relative;
  color: none;
  font-weight: 600;
  font-size: 60px;
  padding-top: 100px;
  padding-bottom: 35px;
  margin: 0;
  line-height: 135%;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 30px #fff, 0 0 20px white;
}
.title h1 span {
  font-weight: 600;
  padding: 0;
  margin: 0;
  color: #BBB;
}
.title h3 {
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  color: #EEEEEE;
  letter-spacing: 2px;
  text-shadow: 0 0 30px #000155;
  line-height: 175%;

}

/* unvisited link */
a:link {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

/* visited link */
a:visited {
  color: white;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: black;
  text-decoration: underline;
  text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 30px #fff, 0 0 20px white;
}

/* selected link */
a:active {
  color: gray;
  text-decoration: none;
}


h2 {color: white;}

我相信这个问题不是 JavaScript 特有的。

实际/预期结果

实际解析的 HTML 和 CSS 在窗口/屏幕底部显示一个红色(深红色)矩形框，as it appears in this image on imgur .这个问题在较窄的分辨率下更为明显。您可能需要减小 Web 浏览器的宽度并向下滚动鼠标滚轮以查看我所指的问题。我希望我的网页显示时没有红色矩形框。

你会如何解决这个问题？消除这个红框可能需要什么属性或值？

我知道我看到的是矩形，因为标题类没有占据我屏幕的整个高度，所以剩下的是 body 元素。但我不确定如何纠正这个问题。

再次，here is my reduced test case on CodePen .对于它的值(value)，here is the original “ALIEN Deviation” that my Pen is based on.

Answer 1

Crimson为红色改变背景:crimson；任何你想要的背景颜色。

添加:

更改 .title 的这一部分

.title {
   padding: 50px 30px;
}

到

.title {
   padding: 50px 30px 0px 30px;
}

如果浏览器出现滚动条，我只能复制它。您将 Canvas 的高度设置为可见视口(viewport)，而不是整个视口(viewport)高度。当您滚动浏览器窗口时， Canvas 会向上滚动以显示间距。

在 CSS .canvas 部分将 position:absolute 更改为 position:fix。

canvas {
   position : fixed;
}