全屏幕背景图像不适用于Firefox

Question

我正在尝试在页面上添加全屏背景图像。 我写的代码显示了chrome上的完整图像，但它在Firefox上只显示了半个屏幕。 我用vw和vh。 但它不适合屏幕。 它显示滚动条。 我尝试了一些来自堆栈溢出的代码。 但他们都不在这里工作。 请帮我解决这个问题。 提前致谢。

 body, html { height: 100%; margin: 0; } .welcome-wrap { background: url('https://cdn.paperindex.com/piimages-new/welcome/paper.jpg'); width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; position: relative; background-position: center; } .welcome-wrap-bg { background: rgba(12, 42, 59, 0.8); width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .welcome-img { max-width: 100px; } .welcome-greet1 { font-size: 36px; font-weight: 700; color: #ffcc29; text-align: center; margin-top: 15px; } .welcome-greet2 { font-size: 32px; font-weight: 700; color: #fff; text-align: center; } .smile { max-width: 32px; } 

 <link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <main class="welcome-wrap"> <div class="welcome-wrap-bg"> <div class="container-fluid"> <div class="row"> <div class="col-sm-12 text-center"> <img class="welcome-img" alt="success" src="https://cdn.paperindex.com/piimages-new/welcome/congrates1.svg"> <h2 class="welcome-greet1">CONGRATULATIONS!!</h2> <h1 class="welcome-greet2">[Site Name] Welcomes You <img class="smile" alt="Smile" src="https://cdn.paperindex.com/piimages-new/welcome/smile.svg"></h1> <div class="text-center mrgn-top-50"> <a href="/dashboard/buying/submit-RFQ.html" class="btn btn-pi radius-2 btn-md" data-original-title="" title="">Create Your Company Profile&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a> </div> </div> </div> </div> </div> </main> 

Answer 1

尝试制作背景大小的跨浏览器，这意味着将以下代码添加到css选择器：

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

所以你的最终代码应该是这样的：

 body, html { height: 100%; margin: 0; overflow:hidden; } .welcome-wrap { background: url('https://cdn.paperindex.com/piimages-new/welcome/paper.jpg'); width: 100%; height: 100vh; background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-attachment: fixed; position: relative; background-position: center; } .welcome-wrap-bg { background: rgba(12, 42, 59, 0.8); width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .welcome-img { max-width: 100px; } .welcome-greet1 { font-size: 36px; font-weight: 700; color: #ffcc29; text-align: center; margin-top: 15px; } .welcome-greet2 { font-size: 32px; font-weight: 700; color: #fff; text-align: center; } .smile { max-width: 32px; } 

 <link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <main class="welcome-wrap"> <div class="welcome-wrap-bg"> <div class="container-fluid"> <div class="row"> <div class="col-sm-12 text-center"> <img class="welcome-img" alt="success" src="https://cdn.paperindex.com/piimages-new/welcome/congrates1.svg"> <h2 class="welcome-greet1">CONGRATULATIONS!!</h2> <h1 class="welcome-greet2">[Site Name] Welcomes You <img class="smile" alt="Smile" src="https://cdn.paperindex.com/piimages-new/welcome/smile.svg"></h1> <div class="text-center mrgn-top-50"> <a href="/dashboard/buying/submit-RFQ.html" class="btn btn-pi radius-2 btn-md" data-original-title="" title="">Create Your Company Profile&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a> </div> </div> </div> </div> </div> </main> 

如果它不起作用，请确保firefox是最新的，如果是这样，从Firefox中删除cookie并刷新页面，祝你好运