悬停框响应式背景CSS格式 - Visual Composer(wpbakery)

Question

我在 wp 页面中有一个带有背景图像的悬停框。这是页面：https://mdipime.org/it/xii-capitolo-generale/。悬停框是徽标。 桌面和笔记本视图都可以，但在移动设备上背景图像是这样的：

我尝试在额外的类模块字段中使用CSS响应代码进行调整。 类名称是 backg-mobile。我把名字放在这里：

CSS响应代码是这样的：

@media (max-width: 400px) {
   .backg-mobile {background-size: 120%; background-repeat: no-repeat;}
}

但它不起作用，因为背景位于内联元素边框中。 html块结构是这样的：

<div class="vc-hoverbox-wrapper  backg-mobile vc-hoverbox-shape--rounded vc-hoverbox-align--center vc-hoverbox-direction--default vc-hoverbox-width--90">
  <div class="vc-hoverbox" style="perspective: 1242px;">
    <div class="vc-hoverbox-inner" style="min-height: 418.594px;">
      <div class="vc-hoverbox-block vc-hoverbox-front" style="background-image: url(https://mdipime.org/wp-content/uploads/2023/07/logo-xii-capitolo-ita.png);">
        <div class="vc-hoverbox-block-inner vc-hoverbox-front-inner">        
        </div>
      </div>
      ...
</div>

我该如何解决这个问题？谢谢您的帮助。

Answer 1

您遇到的问题是由于背景图像被设置为内联样式所致。

所以你只需要用这个更新你的CSS

@media (max-width: 400px) {
   .backg-mobile .vc-hoverbox-front { background-size: 120% !important; background-repeat: no-repeat !important; }
}