Question

我需要一个背景颜色，我的背景图片在我的移动版本上消失了。相反，我得到的只是白色空间。我已经尝试了所有我能想到的东西。我觉得我很累，我只需要一些新鲜的想法。

感谢任何帮助！

这是我的代码：

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

Answer 1

我不确定，但我认为你必须将背景颜色放在背景图像之前。因为图像在那里，所以我认为你的探险家不会识别背景图像属性..我不知道......这是我的第一个想法。

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

1 个答案: