全屏背景图像在Firefox上不起作用
全屏背景图像在Firefox上不起作用
提问于 2019-05-16 20:42:50
我正在尝试在页面上添加全屏背景图像。我写的代码在chrome上显示了完整的图像，但在Firefox上只显示了半个屏幕。我用的是大众和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 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</main>
回答 1
Stack Overflow用户
发布于 2019-05-16 21:05:45
尝试使你的背景大小跨浏览器，这意味着添加以下代码到你的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 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
</main>
如果不起作用，请确保firefox是最新的，如果是这样，请从firefox中删除cookie并刷新页面，祝您好运
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56168869
复制相关文章
相似问题
腾讯云开发者
