最小的背景不显示

Question

我正在尝试制作一个具有响应式背景的移动友好型网站。为此，我制作了 4 种不同尺寸的相同背景：360 像素宽、600 像素宽、1000 像素宽和 1500 像素宽。我使用媒体查询来确定要显示的背景。

/*------------- Styles for different screen sizes -------------
/* For width smaller than 400px: */
body    {
    background-image: url('../data/background/360.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment:fixed;
}

/* For width bigger than 600px: */
@media only screen and (min-width: 600px){
    body    {
        background-image: url('../data/background/600.png');
       
    }
}

/* For width bigger than 1000px: */
@media only screen and (min-width: 1000px){
    body    {
        background-image: url('../data/background/1000.png');
       
    }
}
/* For width bigger than 1500px: */
@media only screen and (min-width: 1500px){
    body    {
        background-image: url('../data/background/1920.png');
       
    }
}
/*-------------------------------------------------------------*/

但是，当屏幕小于 600 像素时，最小背景 (360.png) 不会显示。当我调整屏幕大小时，所有其他背景都会显示出来。这里有什么问题？ url 是正确的。

Answer 1

您可以尝试反转所有内容并使用最大宽度而不是最小宽度。这意味着 max-width: 600 将仅在宽度小于 600 时应用...此外，看到问题的 jsbin.com 演示会很酷，也许您有其他优先级更高的东西来覆盖 css 您期望的值。

Answer 2

您的代码运行良好：JSFIDDLE

唯一的问题可能是：

 background-attachment:fixed;

因为大部分手机都禁用了。

要解决这个问题，您应该添加如下内容：

  @media (max-width: 599px){
      body    {
        background-attachment:scroll;
        background-size: cover;

      }
  }

Answer 3

css 代码完全有效。你把 meta 标签放在 head 部分了吗

尝试使用它会起作用。

 <meta name="viewport" content="width=device-width, initial-scale=1">

把它放在头部。

Answer 4

你可以试试这些背景属性

body{  background-image: url('../data/background/360.png');background-size:100% 100%; background-position:center center;background-repeat: no-repeat;}

最小的背景不显示

Smallest background doesn't show

html

css

background-image

media-queries