我的英雄形象适用于所有浏览器,但不适用于 Mozilla,我不确定为什么会这样,因为我使用的是一些通常适用于我的非常标准的代码。
这是我的完整背景标题图片的 CSS:
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
非常感谢!
最佳答案
简单的解决方案
从 .intro
中删除 height: 100%;
。
替代方案
» 只是展示另一种居中文本/内容的方式。
去掉 .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% );
}
关于html - 英雄形象不适用于 mozilla,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40289560/