html - 2个div之间出现白线-6ren

html - 2个div之间出现白线

转载作者：行者123 更新时间：2023-12-04 03:08:09

我正在尝试去除出现在我网站的第一个和第二个 Div 之间的细白线(“video_main”和“parallax”)。我认为这可能是视频的人工制品，所以我裁剪了从 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 以便父容器可以调整其高度

Working Codepen example .看一下 .video_main video 的声明。

关于html - 2个div之间出现白线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47257627/

文章推荐： RS Selenium : Can't see Browser as I run my Code

文章推荐： php - Magento 2 : category Url Rewrite to Cms page

文章推荐： xml - 根据名称、属性名称、属性值和节点值对 XML 进行排序

javascript - 缩放时JS Canvas 白线
我使用 JavaScript 在 html 5 Canvas 上显示一个数组。该程序对数组中的每个值使用 c.fillRect()。一切看起来都很正常，直到我使用 c.scale() 缩放它。缩放后，
php - 页脚后额外的 1px 白线？
您好! 我正在运行一个博客，使用我自己定制的主题，但我在其中的某些页面上遇到了一个奇怪的问题。主页看起来不受影响，常规页面也不受影响。但是，类别页面会受到此问题的影响。我的博客在这里:http://
html - 使用 2D 变换时的 1px 白线
我有一张带有背景图片的图片，将鼠标悬停在它上面会使用 CSS 2D 变换进行缩放和旋转。一切正常，除了 1px 的白色间隙线，看起来很糟糕。这不仅发生在 Chrome 中，而且几乎所有浏览器都会发生。
android - React-Native:两个 View 之间无法解释的空间(白线)
我有两个 View ，一个叠在另一个上面。模拟器中的屏幕截图: 我在手机上看到的: 从屏幕上可以看出，模拟器版本很好，但我的手机上有一条两个 View 之间的白线。代码如下: import Reac

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 2个div之间出现白线