断点和背景图像问题

Question

所以我有一个 div 包含一个徽标，一个在每个断点处切换的移动和桌面版本。基本上我有 display: none;适当地设置 css 以便它们显示在正确的断点处。在我向我的 .containerLogoDesk 添加背景图像之前，一切都很好，现在这个容器甚至在我不想要的移动断点处仍然存在。不确定为什么会发生这种情况以及如何预防！如果我删除背景图片，@media 屏幕和（最小宽度：730px）将正常工作。

有什么想法吗？谢谢。

/* */

@media screen and (min-width: 730px) {
  .containerLogoMobi,
  .navbar-brand {
    display: none;
  }
}

@media screen and (max-width: 730px) {
  .containerLogoDesk {
    display: none;
  }
}

.logoDesktop {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.logoMobile {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

.navbar-nav {
  margin-right: auto;
  margin-left: auto;
}

.nav-link,
.navbar-brand {
  font-family: Alegreya Sans SC;
  font-size: 20px;
}

.navbar {
  background-color: rgba(47, 69, 111, .7) !important;
}

.containerLogoDesk {
  background-image: url(../images/ex.png);
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-size: cover;
}

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Menu</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Services</a>
        <a class="nav-link" href="#">Gallery</a>
        <a class="nav-link" href="#">Contact</a>
      </div>
    </div>
  </div>
</nav>
<div class="containerLogoDesk">
  <!-- D E S K T O P   L O G O -->
  <img src="images/test3.gif" class="logoDesktop">
</div>
<div class="containerLogoMobi">
  <!-- M O B I L E   L O G O -->
  <img src="images/logoMobileFr.gif" class="logoMobile">
</div>

Answer 1

问题在于您的 media 查询的位置。 CSS 无论是否有媒体查询，仍然会级联，因此在您的代码中，您在顶部有这个：

@media screen and (max-width: 730px) {
  .containerLogoDesk {
    display: none;
  }
}

但是，在最底部，您将该元素设置为阻止。您需要做的是移动 @media 查询 AFTER 您想要更改的属性。

.logoDesktop {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.logoMobile {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

.navbar-nav {
  margin-right: auto;
  margin-left: auto;
}

.nav-link,
.navbar-brand {
  font-family: Alegreya Sans SC;
  font-size: 20px;
}

.navbar {
  background-color: rgba(47, 69, 111, .7) !important;
}

.containerLogoDesk {
  background-image: url(../images/ex.png);
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-size: cover;
}

@media screen and (min-width: 730px) {
  .containerLogoMobi,
  .navbar-brand {
    display: none;
  }
}

@media screen and (max-width: 730px) {
  .containerLogoDesk {
    display: none;
  }
}

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Menu</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Services</a>
        <a class="nav-link" href="#">Gallery</a>
        <a class="nav-link" href="#">Contact</a>
      </div>
    </div>
  </div>
</nav>
<div class="containerLogoDesk">
  <!-- D E S K T O P   L O G O -->
  <img src="https://i.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI" class="logoDesktop">
</div>
<div class="containerLogoMobi">
  <!-- M O B I L E   L O G O -->
  <img src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U" class="logoMobile">
</div>

断点和背景图像问题

Issue with breakpoint and background-image

css

breakpoints

background-image

display