代码之家 › 专栏 › 技术社区 › Success Man

移动访问时如何更改徽标的背景图像?

bootstrap-4 mobile laravel css html

Success Man · 技术社区 · 5 年前

我的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>

我的css如下:

@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

我试着那样做,但没用。如果访问mobile,logo-school-icon.png和两个图像(logo-school.png和logo-school-mobile.png仍将显示。应该只有logo-school-icon.png和logo-school-mobile.png出现

我怎样才能解决这个问题?

注: 我仍然在寻找解决办法。请把我的问题读对。我希望用demo(html+css)来回答。谢谢

2 回复 | 直到 5 年前

G Work 5 年前

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

HTML格式

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
        <img src="https://99designs-blog.imgix.net/wp-content/uploads/2017/04/attachment_79503506-e1491509305138.jpg?auto=format&q=60&fit=max&w=930" alt="icon" width="150" height="150">
        <img class="logo-school" src="https://99designs-blog.imgix.net/wp-content/uploads/2017/04/attachment_79503506-e1491509305138.jpg?auto=format&q=60&fit=max&w=930" alt="logo"  width="300" height="300">
    </a>
</nav>

CSS

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

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

只需调整你自己的图像源。

Chaska 5 年前

您应该在 <img> 显示在桌面上的。然后设置它 display: none; 移动视图。

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{{ route('home') }}">
        <img class="logo-school-desktop" 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>

Stefan Joseph 5 年前

您可以简单地使用媒体查询来实现这一点

编辑:我似乎明白你的问题所在。希望这次编辑能解决你的问题。我已经添加了第三个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
        }

}

G Work 5 年前

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

HTML格式

<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>

CSS

.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');
    }
}

只需调整图片的背景url。

这是工作笔- https://codepen.io/grbawork/pen/ZNbzrZ