英雄形象不适用于 mozilla

Question

我的英雄形象适用于所有浏览器，但不适用于 Mozilla，我不确定为什么会这样，因为我使用的是一些通常适用于我的非常标准的代码。

这是我的 CSS 完整背景 header 图片：

  display: table;
  width: 100%;
  min-height: 100vh;
  height:100vh;
  padding: 100px 0;
  text-align: center;
  color: white;
  background: url(../img/intro-bg.jpg) no-repeat bottom center scroll;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;

这是实时网站：http://www.conlamochilaalhombro.com

非常感谢！

Answer 1

简单的解决方案

从 .intro 中删除 height: 100%;。

备选方案

» 只是展示另一种居中方式 text/content。

删除 .introp 上的 display: table; 和 .intro-body 上的 display: table-cell;。然后居中 .intro-body 像这样：

.introp {
    position: relative;
}
.intro-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
}

英雄形象不适用于 mozilla

Hero image not working on mozilla

html

css

background

image

background-image

简单的解决方案

备选方案