Css 当通过手机访问时，如何更改徽标的背景图像？

我的html如下所示：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
        <img src="{{ asset('assets/images/logo-school-icon.png') }}" alt="icon" width="50" height="50">
        <img class="logo-school" src="{{ asset('assets/images/logo-school.png') }}" alt="logo">
    </a>
</nav>

@media (max-width: 530px) {
    .navbar-brand .logo-school {
        background-image:url('assets/images/logo-school-mobile.png');
    }
}

如果通过dekstop访问，则调用image logo-school-icon.png和logo-school.png

如果通过手机访问，我想显示logo-school-icon.png并将logo-school.png更改为logo-school-mobile.png

我试着那样做，但不起作用。如果访问手机，logo-school-icon.png和两个图像（logo-school.png和logo-school-mobile.png）仍会显示。应仅显示logo-school-icon.png和logo-school-mobile.png

我怎样才能解决这个问题

注:

---

我仍在寻找解决方案。请正确阅读我的问题。我希望用演示（html+css）回答。谢谢

您应该在桌面上显示的

中添加一个类名。然后将其设置为

显示：无；

用于移动视图

@介质（最大宽度：530px）{
.navbar品牌img.logo-school-desktop{
显示：无；
}
.navbar品牌。学校标志{
背景图片：url（'assets/images/logo school mobile.png'）；
}
}

---

正如一些人回答的那样，您可以对每个图像标记应用一个类，然后操纵它们显示的分辨率，但您也可以使用：

HTML

---

只需根据自己的需要调整图像源。

您只需使用媒体查询即可实现此目的

编辑：我似乎理解你的问题所在。希望这个编辑能解决你的问题。我添加了第三个img标签，根据你的屏幕大小使用媒体查询来显示和隐藏它

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
        <img class="logo-school-icon" src="{{ asset('assets/images/logo-school-icon.png') }}" alt="icon" width="50" height="50">
        <img class="logo-school" src="{{ asset('assets/images/logo-school.png') }}" alt="logo">
       <img class="logo-school-mobile" src="{{ asset('assets/images/logo-school-mobile.png') }}" alt="logo">
    </a>
</nav>

@media (min-width: 320px) and (max-width: 530px) {

   .logo-school-icon {
       display: block; // Use !important if you need to overide a style
    }

  .logo-school {
           display: none; // Use !important if you need to overide a style
        }

  .logo-school-mobile {
           display: block; // Use !important if you need to overide a style
        }

}

@media (min-width: 531px) {

   .logo-school-icon {
       display: block; // Use !important if you need to overide a style
    }

  .logo-school {
           display: block; // Use !important if you need to overide a style
        }

  .logo-school-mobile {
           display: none; // Use !important if you need to overide a style
        }

}

@介质（最小宽度：320px）和（最大宽度：530px）{
.学校标志{
display:block；//如果需要覆盖样式，请使用！重要信息
}
.标志学校{
display:none；//如果需要覆盖样式，请使用！重要信息
}
.标志学校流动电话{
display:block；//如果需要覆盖样式，请使用！重要信息
}
}
@介质（最小宽度：531px）{
.学校标志{
display:block；//如果需要覆盖样式，请使用！重要信息
}
.标志学校{
display:block；//如果需要覆盖样式，请使用！重要信息
}
.标志学校流动电话{
display:none；//如果需要覆盖样式，请使用！重要信息
}
}

我看你已经更新了你的问题。现在问题更清楚了。试试这个代码，对我有用

HTML

只需将背景url调整到您的图像即可

---

这是工作笔-

背景图像是css属性。图像src是html属性。它们不同。您需要做的是使用display none在手机上隐藏一个图像。或者使用没有图像元素的背景图像。但是使用图像元素作为徽标是更好的方法，您必须为手机视图隐藏logo-school.png。因此添加css中的this:display=“none”您可能想检查一下这是一个css问题，为什么要添加标签laravelhere@MadhawaPriyashantha你是什么意思？我不明白。我需要一个特殊的答案。我试过了。但它不起作用。请用完整的脚本（html和css）回答。我用不同的解决方案（html和css）编辑了这篇文章1.看看有没有works@G工作我已经尝试过了。但它不工作。请用完整的脚本（html和css）回答。我为您创建了一支笔。请检查它。请再次阅读我的问题。我不想在手机中隐藏logo-school-icon.png，但您说

如果访问手机，两个图像（logo-school.png和logo-school-mobile.png仍会显示。应仅显示logo-school-mobile.png

@media (max-width:530px) {
  nav a img:nth-child(1) {
    display: none;
  }
}

@media (min-width:530px) {
  nav a img:nth-child(2) {
    display: none;
  }
}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
        <img class="logo-school-icon" src="{{ asset('assets/images/logo-school-icon.png') }}" alt="icon" width="50" height="50">
        <img class="logo-school" src="{{ asset('assets/images/logo-school.png') }}" alt="logo">
       <img class="logo-school-mobile" src="{{ asset('assets/images/logo-school-mobile.png') }}" alt="logo">
    </a>
</nav>

@media (min-width: 320px) and (max-width: 530px) {

   .logo-school-icon {
       display: block; // Use !important if you need to overide a style
    }

  .logo-school {
           display: none; // Use !important if you need to overide a style
        }

  .logo-school-mobile {
           display: block; // Use !important if you need to overide a style
        }

}

@media (min-width: 531px) {

   .logo-school-icon {
       display: block; // Use !important if you need to overide a style
    }

  .logo-school {
           display: block; // Use !important if you need to overide a style
        }

  .logo-school-mobile {
           display: none; // Use !important if you need to overide a style
        }

}

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
      <img class="logo-school" width="300" height="300">
    </a>
</nav>

.logo-school {
  display: block;
  background-size: contain;
}

@media (max-width: 530px) {
    .navbar-brand .logo-school {
        background-image:url('https://99designs-blog.imgix.net/wp-content/uploads/2017/04/attachment_79503506-e1491509305138.jpg?auto=format&q=60&fit=max&w=930');
    }
}

@media (min-width: 530px) {
    .navbar-brand .logo-school {
        background-image:url('https://www.schoolbrandingmatters.co.nz/wp-content/uploads/2018/11/Whitau-School-Logo-2.jpg');
    }
}