仅在 Safari 中背景视频错位。当我删除“top: 50%”和“left: 50%”时,它可以在 Safari 上工作,但在 Chrome 等中位置会变得不合适。有人知道如何让它在两者上工作吗?
video {
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url(../images/vidstill.png) no-repeat;
background-size: cover;
transition: 1s opacity;
}
最佳答案
我遇到了同样的问题。让 Safari 识别“transform: translateX(-50%) translateY(-50%);”您需要添加另一行:“-webkit-transform: translateX(-50%) translateY(-50%);”
添加“-webkit”将帮助 Safari 理解您想要什么。所以它最终看起来像这样:
video {
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
background: url(../images/vidstill.png) no-repeat;
background-size: cover;
transition: 1s opacity;
}
关于html - 仅在 Safari 中背景视频位置不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32378358/