背景视频仅限于Safari中的位置

Question

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

Answer 1

我遇到了同样的问题。让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;
}