当背景图像从1080像素宽度变为移动宽度时，调整背景图像的大小或像素

Question

当图片从桌面移动到移动设备时，我添加了这个媒体查询来调整图片的大小，但这并不符合要求。有什么想法吗？

​

@media (max-width: 768px) {
  #team {
    background-color: #fff;
    background-image: #444 url('../img/womencoffee.jpg') center top no-repeat fixed;
  }
}

​

当我去看它的时候，它仍然真的在手机版上放大了我的形象。

请参阅站点部分：nonprofit section

Answer 1

您的问题围绕着为您的CSS属性提供不正确的参数。

在提供媒体查询的链接中是：

@media ( max-width: 768px ) {
  background-color: #999999;
  background-image: image-url( 'http://placekitten.com/g/500/768' );
}

这个不起作用，因为image-url()应该是url()。

在上面提供的代码中，您拥有：

@media ( max-width: 768px ) {
  background-color: #fff;
  background-image: #444 url( 'http://placekitten.com/g/500/768' ) center top no-repeat fixed;
}

在这里，您向只接受一个参数url()的background-image提供了多个参数。我想您正在寻找background属性，它允许您一次设置多个背景属性。

将background-image更改为background可以正常工作。一旦进行了此更改，background-color就变得多余了，因为您正在用#444重新定义它。