我需要在我的背景图像在我的移动版本上消失的下方添加背景颜色。相反，我得到的只是空白。我已经尝试了我能想到的一切。我想我已经筋疲力尽了，我只需要一些新鲜的想法。
感谢任何帮助!
这是我的代码:
HTML:
<body>
<div id="vidContainer">
<video autoplay loop poster="assets/bgVideo.mp4" id="bgvid">
<source src="assets/bgVideo.mp4" type="video/mp4">
<source src="assets/bgVideo.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<div>
<a href="mailto:info@confidential.com">
<img id="logo" src="assets/img/logo-black.png"/>
</a>
<a href="mailto:info@confidential.com" style="text-decoration:none">
<p id="bigData">Big Data. Big Ideas.</p>
</a>
</div>
<script type="text/javascript">
<!--
if (screen.width <= 800) {
document.getElementById("vidContainer").innerHTML = "";
}
//-->
CSS:
body, html{
max-width: 100%;
overflow-x: hidden;
}
body{
background-image: url("http://i710.photobucket.com/albums/ww108/benkelsey/mobileBG.png");
background-color: black;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height:100%;
}
#logo{
margin-top:13em;
display:block;
margin-right:auto;
margin-left:auto;
height:35em;
padding-left:19px;
padding-top:7px;
}
#bigData{
text-align:center;
font-family: 'Quicksand', sans-serif;
font-size:2em;
color:black;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
padding-bottom:0;
margin-bottom:0;
}
video#bgvid{
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
最佳答案
我不确定，但我认为您必须将背景颜色放在背景图像之前。因为图像在那里，所以我认为您的资源管理器无法识别背景图像属性。我不知道。这是我的第一个想法。
关于javascript - 如何在背景图片下添加背景颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29926816/