Question

我正在尝试使用mobile-style.css隐藏640px的背景。这适用于Chrome，但不适用于Firefox或手机游戏？它也适用于Firefox，但不适用于服务器？非常奇怪。

        <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/style-mobile.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/muscle-map.css" rel="stylesheet" type="text/css" media="all" />
      </head>

      <body>

        <div id="muscle-map">
          <img id="background" src="Crops/00. Blank Figures.jpg" />
          <img id="biceps-a" src="Crops/05.A Biceps.png" />
          <img id="biceps-b" src="Crops/05.B Biceps.png" />
          <img id="obliques" src="Crops/04. Obliques.png" />

        </div>
      </body>

的style.css

  #muscle-map {
         position: relative;
       }

 #background {
   width: 100%;
  }


  #muscle-map > img:not(#background) {
    display: block;
    position: absolute;
    transition: opacity 0.2s;
    opacity: 0;
  }

  #muscle-map > img:not(#background):hover {
    opacity: 1;
  }


  #muscle-map > #biceps-a {
    top: 30%;
    left: 23.9%;
    width: 3.6%;
  }

  #muscle-map > #biceps-b {
    top: 30.0%;
    left: 37.9%;
    width: 3.8%;
  }


   #muscle-map > #obliques {
    top: 31.6%;
    left: 27.3%;
    width:10.8%;
  }


  #muscle-map > #quads-b {
    top: 47%;
    left: 27.22%;
    width: 2.8%;
  }

  #muscle-map > #quads-a {
    top: 46.5%;
    left: 35.3%;
    width:3%;
  }

样式mobile.css

 @media screen and (max-width: 640px) {
        #background {

           display:none;
            }   

        }

Answer 1

我建议使用CSS中的background属性而不是使用img作为背景，因为它会导致某些或其他浏览器出现问题。只需在CSS文件中添加图像的路径，并在媒体查询中将属性更改为none，就可以了。另外，请确保图像路径或图像名称中没有任何空格。尝试用' - '或'_'替换空格。

例如：

#muscle-map {
    position: relative;
    background: url("Crops/00.-Blank-Figures.jpg") 0 0;
    background-size: 100%;
}
 @media screen and (max-width: 640px) {
    #background {
       background: none;
    }
}

为什么这个媒体查询没有显示不起作用？

1 个答案: