Question

我正在尝试在页面上添加全屏背景图像。我编写的代码在chrome上显示了完整图像，但在Firefox上仅显示了半屏。我用大众和大众。但它不适合屏幕。它显示滚动条。我尝试了一些来自堆栈溢出的代码。但是他们都不在这里工作。请帮助我解决此问题。预先感谢。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <h3 align="center">Boardgamefilter</h3>

<form name="gamesettings">
<input type="checkbox" name="gamesetting" value="1p">1p<br />
<input type="checkbox" name="gamesetting" value="2p">2p<br />
<input type="checkbox" name="gamesetting" value="3p">3p<br />
<input type="checkbox" name="gamesetting" value="4p">4p<br />
<input type="checkbox" name="gamesetting" value="5p">5p<br />
<input type="checkbox" name="gamesetting" value="6plus">6plus<br />
<br />
<input type="checkbox" name="gamesetting" value="15m">15m<br />
<input type="checkbox" name="gamesetting" value="30m">30m<br />
<input type="checkbox" name="gamesetting" value="45m">45m<br />
<input type="checkbox" name="gamesetting" value="60m">60m<br />
<input type="checkbox" name="gamesetting" value="90m">90m<br />
<input type="checkbox" name="gamesetting" value="120mplus">120mplus
<br />
<br />
<input type="button" name="Un_CheckAll" value="Reset"
onClick="UnCheckAll(document.gamesettings.gamesetting)">
</form>

<br />
<br />

<div id="boardgames">
<div class="1p 2p 15m 30m" style="display: block;">1p 2p 15m 30m</div>
<div class="1p 2p 30m 45m" style="display: block;">1p 2p 30m 45m</div>
<div class="2p 30m 60m" style="display: block;">2p 30m 60m</div>
</div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">

    $('input[name=gamesetting]').change(function(){

        var arr = []
        $(":checkbox").each(function(){
           if($(this).is(":checked")){
             arr.push($(this).val())
           }
        })
        var vals = arr.join(".")
        var str = (".") + vals

        $('#boardgames div').hide();
        $('#boardgames div' + (str)).show();

    })

    function UnCheckAll(chk) {
        for (i = 0; i < chk.length; i++)
        chk[i].checked = false ;
        $('#boardgames div').show();
    }

</script>

</body>
</html>

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

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并刷新页面，祝您好运

全屏背景图片在Firefox上不起作用

1 个答案: