时间戳

首页 > 解决方案 > 全屏背景图像在 Firefox 上不起作用

html - 全屏背景图像在 Firefox 上不起作用

问题描述

我正在尝试在页面上添加全屏背景图像。我编写的代码在 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>

标签： htmlcss

解决方案

尝试使您的背景大小跨浏览器，这意味着将以下代码添加到您的 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 并刷新您的页面，祝您好运

推荐阅读