Question

最近，我正在尝试创建一个主页，其中有一个背景视频循环和我公司的徽标位于页面的中心。但是当我这样做时，它似乎在图像的左右两侧留有空白。但是，当我将视频代码放在图像代码上方时，图像显然是不可见的（显然）。

这是html代码：

<!DOCTYPE html>
<html>
<head>
<title>Thrytbox - Connect with people</title>

<link rel="stylesheet" type="text/css" href="main.css" />

<script type="text/javascript">
//jQuery is required to run this code
$( document ).ready(function() {

scaleVideoContainer();

initBannerVideoSize('.video-container .poster img');
initBannerVideoSize('.video-container .filter');
initBannerVideoSize('.video-container video');

$(window).on('resize', function() {
    scaleVideoContainer();
    scaleBannerVideoSize('.video-container .poster img');
    scaleBannerVideoSize('.video-container .filter');
    scaleBannerVideoSize('.video-container video');
});

});

function scaleVideoContainer() {

var height = $(window).height() + 5;
var unitHeight = parseInt(height) + 'px';
$('.homepage-hero-module').css('height',unitHeight);

}

function initBannerVideoSize(element){

$(element).each(function(){
    $(this).data('height', $(this).height());
    $(this).data('width', $(this).width());
});

scaleBannerVideoSize(element);

}

function scaleBannerVideoSize(element){

var windowWidth = $(window).width(),
windowHeight = $(window).height() + 5,
videoWidth,
videoHeight;

console.log(windowHeight);

$(element).each(function(){
    var videoAspectRatio = $(this).data('height')/$(this).data('width');

    $(this).width(windowWidth);

    if(windowWidth < 1000){
        videoHeight = windowHeight;
        videoWidth = videoHeight / videoAspectRatio;
        $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});

        $(this).width(videoWidth).height(videoHeight);
    }

    $('.homepage-hero-module .video-container video').addClass('fadeIn animated');

});
}
</script>
<link href="qwerty.css" rel="stylesheet"/>
</head>
<body>

<div id="cssmenu">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li class="has-sub "><a href="#">Team</a>
...
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<img src="bg.png" align="center" />
<div class="wrap" align="center" style="display: block; font-family: sans- serif;">
    <div class="type-wrap">
        <div id="typed-strings">
            <span>We built<strong> by</strong> students.</span>
            <p>Made <em>for </em> people</p>
            <p>And built with love</p>
            <p>Try it out!</p>
        </div>
        <span id="typed" style="white-space:pre;"></span>
    </div>
</div>
<div class="homepage-hero-module">
<div class="video-container">
    <div class="filter"></div>
    <video autoplay loop class="fillWidth">
        <source src="vidbg.mp4" type="video/mp4" />Your browser does not support the video tag. Please upgrade your browser.
    </video>
</div>
</div>
</body>
</html>

这是css代码：

html,
body {
background-position: 50% 50%;
margin:0px;
padding:0px !important;
height:100%;
overflow: hidden;
}

img {
object-fit: cover;
width: 300px;
height: 250px;
display: block;
margin: 0 auto;
padding: 0;
}

@charset "UTF-8";

#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0;  z-index: 598; width: 100%;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0;  }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }

.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: relative;
bottom: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .poster img {
width: 100%;
bottom: 0;
position: absolute;
}
.video-container .filter {
z-index: 100;
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 100%;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}

Answer 1

假设这是你布置元素的方式：

<div class="wrapper">
  <div class="video">
     your video here..
  </div>
  <div class="logo">
    your logo here..    
  </div>
</div>

你的定位css应该是这样的：

.wrapper {
  position: relative;
  /* .. other css here */
}

.video {
  position: absolute;
  z-index: 1;      
  /* .. other css here */
}

.logo {
  position: absolute;
  z-index: 2;
  /* .. other css here */
}

基本上，您必须将视频和徽标元素设置为相互叠加（设置position: absolute;）。然后，您必须添加z-index规则，以确保您的视频和徽标按照您想要的顺序堆叠。

Answer 2

使用类div创建一个新元素.wrapper并包装视频和图片，使.wrapper位置相对，然后您可以将其他元素放置在您想要的位置，在这种情况下，您可以将.company-logo与中心位置绝对居中，我使用left: 50% + transform: translateX(-50%)，因此它将始终位于视频的中心，但您可以将其移动到您的位置想。

有一个片段显示我说的话：

.wrapper {
  position: relative;
}
.company-logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.company-video {
  background-color: red;
  width:100%;
  height: 150px;
}

<div class="wrapper">
  <div class="company-logo">
    <img src="http://placehold.it/150x150">
  </div>
  <div class="company-video">
  </div>
</div>

如何在视频顶部放置图像而不留下白色背景？

2 个答案: