Question

试图让我的可点击背景图像在所有设备上响应，但似乎可以绕过它。它在10英寸以上的屏幕设备上显示效果很好，但在屏幕设备较低的情况下，图像会被切断。我希望能够在所有设备上做出响应。任何抬头都会对此表示赞赏。

使用的代码如下：

#range-logo {
margin:0 auto;
  background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  display: block;
  height: 800px;
  width: 1240px;
}


@media only screen and (max-width: 767px) {
  #range-logo {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
  }
	}

<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>

Answer 1

如果您想在后台看到完整图片，请使用contain属性而不是cover。

＆＃13;

*{
  margin:0;
  padding:0;
}
body,html{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
}

#range-logo {
margin:0 auto;
  background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  display: block;
  height: 100vh;
  width: 100%;
}


@media only screen and (max-width: 767px) {
  #range-logo {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
  background-size:100% 100%;
  }
	}

＆＃13;

<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>

＆＃13;

Answer 2

您可以在background-position中将100%更改为media query，这样可以正常工作，但这会使您在移动设备上的图片fixed background与其他视觉效果相比较在其他设备上。

body{
margin:0px;
}
#range-logo {
margin:0 auto;
  background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  display: block;
  height: 800px;
  width: 1240px;
}


@media screen and (max-width: 767px) {
  #range-logo {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
    background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
    background-size:100% 100%;
  }
}

<a id="range-logo" title="ByPlus Consulting" href="http://midwaycinema7.com/about"></a>

Answer 3

尝试将此添加到您的媒体查询中：

    @media only screen and (max-width: 767px) {
      #range-logo {
        background-image: url(http://midwaycinema7.com/wp-content/uploads/2016/12/bgneww.png);
        background-size:contain;
      }
}

使背景图像响应

3 个答案: