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

Question

Recently, I'm trying to create a homepage where there is a background video looping and a logo of my company at the centre of the page. 最近，我正在尝试创建一个主页，其中有一个背景视频循环和我公司的徽标在页面的中心。 But when I did it, it appears to have white spaces left and right of the image. 但是当我这样做时，它似乎在图像的左右两侧留有空白。 But, when I put the video codes above the image code, the image had been invisible (obviously). 但是，当我将视频代码放在图像代码上方时，图像显然是不可见的（显然）。

Here's the html code: 这是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>

Here's the css code: 这是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

Assuming this is how you layout your elements: 假设这是您布置元素的方式：

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

Your positioning css should look something like this: 你的定位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 */
}

Basically, you'll have to set the video and logo elements to overlay each other (setting position: absolute; ). 基本上，您必须将视频和徽标元素设置为相互叠加（设置position: absolute; ）。 You then have to add a z-index rule to ensure your video and logo are stacked in the order you want. 然后，您必须添加z-index规则，以确保您的视频和徽标按所需顺序堆叠。

Answer 2

Create a new element div with the class .wrapper and wrap the video and the image, make the .wrapper position relative and then you can place the others elements like you want, on this case you can center the .company-logo with position absolute on the center, I use left: 50% + transform: translateX(-50%) so it will be always on the center of the video, but you can move it where you want. 用类.wrapper创建一个新的元素div并包装视频和图像，使.wrapper位置相对，然后你可以放置你想要的其他元素，在这种情况下你可以将.company-logo置于绝对位置的中心在中心，我使用left: 50% + transform: translateX(-50%)因此它将始终位于视频的中心，但您可以将其移动到您想要的位置。

There is a snippet showing what I said: 有一个片段显示我说的话：

 .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 个解决方案

解决方案1
0 2017-01-05 08:47:17

解决方案2
0 已采纳 2017-01-05 08:48:40

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

问题描述

2 个解决方案

解决方案1 0 2017-01-05 08:47:17

解决方案2 0 已采纳 2017-01-05 08:48:40

解决方案1
0 2017-01-05 08:47:17

解决方案2
0 已采纳 2017-01-05 08:48:40