白线出现在 2 div 之间

我正在尝试摆脱出现在我网站的第一个 2 个div 之间的一条细白线("video_main"和"视差"(。我认为这可能是视频的伪影，所以我从 Premiere Pro CC 导出时裁剪了底部，但它仍然出现。我尝试为video_main和视差div制作边距，填充和边框0px，但它并没有摆脱细白线。谁能说出为什么会这样？非常感谢。

<!DOCTYPE HTML>
<html>
<head>
  <script src="//content.jwplatform.com/libraries/YQ8opLwo.js">
  </script>
  <script src="https://use.typekit.net/qkv6kzb.js"></script>
  <script>
    try {
      Typekit.load({
        async: true
      });
    } catch (e) {}
  </script>
  <script src="https://use.typekit.net/qkv6kzb.js"></script>
  <script>
    try {
      Typekit.load({
        async: true
      });
    } catch (e) {}
  </script>
  <meta charset="UTF-8">
  <title>Barton's website</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="video_main">
    <video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload>
    <source src="red_hook_rush_hour_trimmed.mp4" type="video/mp4">
        </video>
    <div class="content">
      <h1>Barton Lewis</h1>
      <h2>films about light and the urban landscape</h2>
      <div class="videolinks">
        <p><a href="index.html" title="home">home</a></p>
        <p><a href="bartons_film_site_works.html" title="works">works</a></p>
        <p><a href="bartons_film_site_bio.html" title="bio">bio</a></p>
        <p><a href="bartons_film_site_cv.html" title="c/v">CV</a></p>
        <p><a href="bartons_film_site_contact.html" title="contact">contact</a></p>
      </div>
    </div>
  </div>
  <div class="parallax">
    <div class="container_blank_space">
      <p>text</p>
    </div>
    <section class="wrapper_pano_and_text">
      <div class="pano">
        <img src="https://bartonlewisfilm.com/barton-3.jpg" alt="barton" width="auto" height="auto" />
      </div>
      <div class="pano_text">
        <p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here.</p>
      </div>
    </section>
  </div>
</body>
</html>

/* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */
* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
paragraph {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*THIS IS THE END OF THE MYER RESET*/
body {
  width: 100%;
  margin: 0 auto 0;
}
a {
  font-family: "europa", sans-serif;
  text-align: left;
  text-decoration: none;
  letter-spacing: 3px;
  font-size: 22px;
  color: white;
}
a:hover {
  text-decoration: underline;
}
.parallax {
  /* The image used */
  background-image: url("https://bartonlewisfilm.com/html_bckgd_1024.jpg");
  /* Set a specific height */
  height: 1620px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.video_main {
  margin: 0 auto 0;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.video_main video {
  /*width: 100%;*/
  width: 100%;
  height: auto;
  min-width: 720px;
  margin: 0 auto;
  z-index: -1500;
}
.content h1 {
  font-family: "jaf-domus-titling-web", sans-serif;
  color: white;
  text-align: center;
  font-size: 400%;
  letter-spacing: 4px;
  z-index: 100;
  position: absolute;
  top: 50px;
}
.content h2 {
  font-family: "europa", sans-serif;
  color: white;
  text-align: center;
  font-size: 225%;
  letter-spacing: 6px;
  z-index: 100;
  position: absolute;
  top: 175px;
}
.content p {
  font-family: "europa", sans-serif;
  color: white;
  font-size: 120%;
}
h1 {
  width: 100%;
}
h2 {
  width: 100%;
}
.content .videolinks {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
}
.videolinks p {
  padding: 20px;
  padding-left: 60px;
}
.videolinks p:first-child {
  padding-top: 250px;
}
.wrapper_pano_and_text {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 0px;
  justify-content: center;
  align-items: center;
}
.pano img {
  width: 100%;
  height: 100%;
  padding: ;
  z-index: -1500;
}
.pano_text {
  width: 45%;
  overflow: hidden;
  z-index: 100;
  position: absolute;
}
.pano_text p {
  font-family: "europa", sans-serif;
  font-size: 150%;
  padding-right: 80px;
  letter-spacing: px;
  color: white;
  font-weight: 500;
  line-height: 135%;
  font-weight: 500;
}
.container_blank_space {
  height: 75px;
}
.container_blank_space p {
  text-indent: -9999px;
}

看起来 .video_main 下的视频元素缺少与inline不同的display值。

应将其 display (CSS( 值设置为 display: block 或 display: flex，以便父容器可以正确调整其高度。

工作代码笔示例。看看.video_main video宣言.

相关内容

最新更新

热门标签：