我想替换并更改我的CSS背景图像到视频，有人知道如何制作它吗？ 有什么方法可以将图像更改为上传的视频src吗？没有打破左右分裂。
图像是css下的路径。与.side-left {background-image：url（＆＃39; left.jpg＆＃39;）;}我确实尝试将源left.jpg更改为myvideo.mp4，但似乎无效。
我的HTML
<body>
<div class="container">
<div id="splitlayout" class="splitlayout">
<div class="intro">
<header class="codropsheader clearfix">
<!--
<span>Rex Photography<span class="bp-icon bp-icon-about" data-content="Photography is the science, art, application and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically ..."></span></span>
-->
<a href="index.html"><img class="headerlogo" src="logo2.jpg" title="PixPodium" alt="PixPodium"/></a>
<!--
<nav>
<a href="project.html" class="bp-icon bp-icon-prev" data-info="Go to Projects" ><span>Go to Commercials</span></a>
<a href="wedding.html" class="bp-icon bp-icon-next" data-info="Go to Weddings"><span>Go to Weddings</span></a>
<!--
<a href="http://tympanus.net/codrops/?p=16693" class="bp-icon bp-icon-drop" data-info="back to the Codrops article"><span>back to the Codrops article</span></a>
-->
<!--
<a href="contact.html" class="bp-icon bp-icon-archive" data-info="Contact Us"><span>Contact Us</span></a>
<!--
</nav>
-->
<div class="demos">
<a href="project.html">Commercials</a>
<a href="wedding.html">Weddings</a>
<a href="contact.html">Contact Us</a>
</div>
</header>
<div class="topWrapper" style ="display:none;">
<div class="side side-left" >
<div class="intro-content">
<!--
<div class="profile"><img src="img/profile1.jpg" alt="profile1"></div>
-->
<a href="project.html"><h1 ><span></span><span>Commercials</span></h1></a>
</div>
<div class="overlay"></div>
</div>
</div>
<div class= "bottomWrapper" style = "display:none;">
<div class="side side-right" >
<div class="intro-content">
<!-- Original Code Start
<h1 style="background-color:rgba(0, 0, 0, 0.5);"><span >Weddings</span><span>Weddings</span></h1>
Original Code End -->
<a href="wedding.html"><h1><span></span><span>Weddings</span></h1></a>
</div>
<div class="overlay"></div>
</div>
</div>
</div><!-- /intro -->
</div><!-- /splitlayout -->
</div><!-- /container -->
</body>
<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".topWrapper").fadeIn(1000);
$(".bottomWrapper").fadeIn(1000);
//$(".topWrapper").fadeIn("slow");
//$("#div3").fadeIn(3000);
});
</script>
</html>
我的css
html, body,
.container {
position: relative;
width: 100%;
height: 100%;
}
body {
overflow-y: scroll;
/*
background: #fff;
*/
background: #fff;
}
.splitlayout {
position: relative;
overflow-x: hidden;
min-height: 100%;
width: 100%;
}
/* Intro sides */
.side {
position: fixed;
/*top: 0; */
z-index: 100;
width: 50%;
height: 100%;
text-align: center;
-webkit-backface-visibility: hidden;
}
.open-left .side,
.open-right .side {
cursor: default;
}
.overlay {
position: absolute;
top: 0;
left: 0;
z-index: 499;
visibility: hidden;
width: 100%;
height: 100%;
opacity: 0;
}
.side-left .overlay {
background: rgba(0,0,0,0.7);
}
.side-right .overlay {
background: rgba(0,0,0,0.3);
}
.side-left {
/* Original code Start
left: 0;
background: #47a3da;
color: #fff;
outline: 1px solid #47a3da; /* avoid gap
Original Code End */
left: 0;
float: left;
background-image: url('left.jpg');
/* <------ */
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image*/
/*background: #47a3da;*/
color: #fff;
/*outline: 1px solid #47a3da; /* avoid gap */
}
.side-right {
/* Original code Start
right: 0;
background: #fff;
color: #47a3da;
/*outline: 1px solid #fff; /* avoid gap */
right: 0;
background-image: url('right.jpg');
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image*/
color: #fff;
}
答案 0 :(得分：1)
您可以使用html中的视频标记：
<video autoplay muted loop id="myVideo">
<source src="video.mp4" type="video/mp4">
Any alternate text.
</video>
在css中：
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
This将帮助您学习和实施所需的功能。
答案 1 :(得分：0)
使视频成为正文中的静态或绝对div。 将其设置为宽度和高度100％。 将内容放在上面。
查看此示例： https://jsfiddle.net/zrjqctov/7/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#videobackground {
width: 100%;
height: 100%;
background-color: red;
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
#videobackground iFrame {
width: 100%;
height: 100%;
}
#container {
height: 100%;
width: 100%;
font-family: sans-serif;
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
#container > div {
background-color: rgba(255,255,255,0.5);
}<div id="videobackground">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ztc6_elMg60" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<div id="container">
<div>
<h1>
Content here
</h1>
</div>
<div class="demos">
<a href="project.html">Commercials</a>
<a href="wedding.html">Weddings</a>
<a href="contact.html">Contact Us</a>
</div>
</div>