如何在背景图像下添加背景颜色？答案

【问题标题】：How do I add background color under background image?如何在背景图像下添加背景颜色？
【发布时间】：2015-04-29 02:36:06
【问题描述】：

我需要一个背景颜色，在我的移动版本上我的背景图像消失的地方。相反，我得到的只是空白。我已经尝试了我能想到的一切。我想我已经筋疲力尽了，我只需要一些新鲜的想法。

感谢任何帮助！

这是我的代码：

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;
}

【问题讨论】：

你的意思是你的背景视频消失在哪里？你想要什么 div 的背景颜色？您似乎没有尝试在 body 标记以外的任何位置插入背景颜色。
不，我的意思是背景图像消失的地方。我的 JavaScript 使视频不会出现在移动设备上。相反，会出现一个背景图像，但它不会填满浏览器的整个高度。它被切断并在下面留下空白区域。
你能做一个小提琴或codepen吗？另外，这就是你正在使用的所有 JS 吗？它们是图像被截断还是 div/body 被截断？
@BenKelsey 添加html {height:100%;}怎么样？
我和 Zac 在一起，给我们看一个例子。我无法复制您的问题。

标签： javascript html css responsive-design

【解决方案1】：

我不确定，但我认为您必须将背景颜色放在背景图像之前。因为图像在那里，所以我认为您的资源管理器无法识别背景图像属性..我不知道..这是我的第一个想法。

【讨论】：