0
私のウェブサイトの第1の2 Div（「video_main」と「視差」）の間に現れる細い白線を取り除こうとしています。私はこれがビデオのアーティファクトかもしれないと思ったので、私はPremiere Pro CCからのエクスポートの一番下を切り取ったが、まだ現われている。 video_mainとparallax divのマージン、パディング、ボーダーを0pxにしようとしましたが、細い白線を取り除いていません。それが起こっている理由を誰かが伝えることができますか？どうもありがとう。白い線が2つのdivの間に現れる
<!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;
}
作業コードまたはリンクを入力してください。 –