html - 移动修复 Wordpress 类问题

Question

我目前正在 dev.dragonscaletech.com 网站上工作

我遇到了某个类的问题。

标题中的代码是

<div id="mobilebgfix">
<div class="mobile-bg-fix-img-wrap">
    <div class="mobile-bg-fix-img"></div>
</div>
<div class="mobile-bg-fix-whole-site">

当我使用 google inspect 时，它会向 mobile-bg-fix-img 添加内联样式。我无法在 css 或代码中的任何地方找到它。不确定它来自哪里。

<div class="mobile-bg-fix-img" style="width: 375px; height: 767px; background-size: auto; background-position: 50% 0%; background-repeat: repeat; background-image: url(&quot;http://dev.dragonscaletech.com/wp-content/uploads/2018/01/Hero-Banner-No-Title.png&quot;);"></div>

我正尝试在我的 child 主题中为以下类(class)开设类(class):

@media (max-width: 767px) {
.mobile-bg-fix-img {
background-position: 150% 0% !important;
}
}

浏览器似乎忽略了媒体查询并更改了任何分辨率的背景位置。

我基本上只是尝试将图像定位到移动垂直 View 中的某个位置。

提前致谢!

Answer 1

您的 background-position 确实在小宽度下正确应用，并且您的 !important 声明将覆盖内联样式:

@media (max-width: 767px) {
  .mobile-bg-fix-img {
    background-position: 150% 0% !important;
  }
}

<div class="mobile-bg-fix-img" style="width: 375px; height: 767px; background-size: auto; background-position: 50% 0%; background-repeat: repeat; background-image: url(&quot;http://dev.dragonscaletech.com/wp-content/uploads/2018/01/Hero-Banner-No-Title.png&quot;);"></div>

如果它不适用于您的网站，那么您要么有一些额外的具有更高 specificity 的覆盖逻辑。 ，或者您缓存了旧的 CSS。确保使用 CTRL + SHIFT + R 清除 CSS 缓存，另外使用 CTRL + 清除 HTML 缓存F5.

唯一可能的情况是您实际上没有正确引用您的 CSS 文件。通过检查 F12 Developer Tools 的 Sources 选项卡确保正在加载 CSS 文件。 .

希望这对您有所帮助!