Question

我无法在手机中正确看到图像，在笔记本电脑中看起来很好但在手机中看不到，实际上我手动裁剪并且在小于700px时使用了不同的一个，并且这不起作用，我这样做因为我使用封面英雄和最初的这一部分，但即使我使用较小的一个电话和再次使用封面不起作用。有什么建议吗？

#hero{
  background: rgba(0,0,0,.1) url('../img/wallpapers/wallpaper_hero.jpg') no-repeat fixed center / cover;
  width: 100%;
  height: 100vh;


  /*background: rgba(0,0,0,.1) url('../img/wallpapers/wallpaper_hero.jpg') no-repeat fixed center top / cover;*/

}


@media screen and (max-width: 771px) {


  #hero {
    background: rgba(0,0,0,.1) url('../img/wallpapers/wallpaper_hero.jpg') no-repeat center / cover;


  }

}

<header id="hero">

    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h1>Central de ingredientes</h1>
        </div>
      </div>
    </div>

  </header>

enter image description here enter image description here

Answer 1

查看您的示例网址，看起来您可能会混淆媒体查询，这是查询应如何工作的基本示例：

基本上，当浏览器来自0-770px时，它会显示smaller图像文件，而771px+时，它会显示larger图像。

展开代码段并调整浏览器大小以查看图像更改

＆＃13;

.hero {
  background-image:url(http://via.placeholder.com/1600x600);
  background-position:center center;
  background-size:cover;
  height:100vh;
}

@media only screen and (max-width: 770px){

  .hero {
    background-image:url('http://via.placeholder.com/770x400');
  }  
}

＆＃13;

<section class='hero'>
<section class='hero__content'>
</div>
</section>

＆＃13;

在响应中看不到英雄财产

1 个答案: