背景缩放错误？答案

【问题标题】：Error in background zoom?背景缩放错误？
【发布时间】：2017-07-06 18:53:30
【问题描述】：

我有一个 WordPress 网站，我在其中使用带有整页部分的 Visual Composer。我使用 CSS 添加了缩放背景。它位于以下 URL：http://white-vision.nl/particulier/

.upb_row_bg {
animation: leaves 20s infinite;
}

@keyframes leaves {
0%, 100% {
    transform: scale(1.0);
}
50% {
    transform: scale(1.1);
}
}

看起来效果很好，但是在谷歌浏览器中向上滚动时（所以从第 3 部分到第 2 部分）它会得到一个白色的透明覆盖层，并且视频框被向下推。当您向下滚动时（从第 1 部分到第 2 部分），一切正常。

这只是 Google Chrome（在 Mac 和 Windows 上）中的问题。它在 Firefox、Edge 和 Safari 中运行良好。有谁知道如何解决这个问题？提前致谢！

PS：删除缩放功能时，没有问题。

【问题讨论】：

【解决方案1】：

类fp-tableCell vc_row-has-fill 的父元素的内联样式发生了变化。已更改的属性之一是opacity: 0.107967。这就是使您的背景看起来透明的原因。

您应该尝试通过 javascript 访问该元素并强制它停留在opacity: 1。如果你不能通过脚本做到这一点，你可以通过添加来强制该元素的不透明度：

.vc_row-has-fill {
    opacity: 1 !important;
}

这将覆盖内联样式上不断变化的不透明度。

【讨论】：