html - 封面图片未在 safari 和 ie 9 中设置

Question

我需要设置主要部分的封面背景图片。该代码在除 safari 和 ie9 之外的所有浏览器中都可以正常工作。

代码如下:

CSS

.main{ 
background:#202020 url(../images/video-bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
float:left; width:100%;
padding-bottom:120px;
height:100vh;
min-height:100%;
max-height:100%;
top:0px;
bottom:0px;
}

html

<div class="main">
<!--[Start] Header-->
<header>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a href="#" class="navbar-brand">Degetal Agency</a>
            </div>

            <div id="navbar">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="">Projects</a></li>
                    <li><a href="">Studio</a></li>
                    <li><a href="">Approach</a></li>
                    <li><a href="">Blog</a></li>
                    <li><a href="">Contact</a></li>
                </ul>   
            </div>
        </div>  
    </nav>

    <div class="col-xs-12">
        <div class="container-75">
            <div class="text-center">
                <div class="vcenter">
                    <h1>Digital solutions led by clarity, simplicity & honesty</h1>
                </div>  
                <div class="clearfix"></div>
                <a class="font18" href="javascript:void(0);">Learn More</a>
            </div>
        </div>          
    </div>
</header>
<!--[End] Header-->
</div>

请帮我解决 safari 和 ie 中的问题。

非常感谢您的反馈。

Answer 1

不要使用封面，而是尝试根据屏幕方向使用 100% auto 或 auto 100%。