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

【问题标题】：Adjusting the size or pixelation of a background image when it goes from 1080 px width to mobile width当背景图像从 1080 像素宽度变为移动宽度时，调整其大小或像素化
【发布时间】：2017-05-29 08:32:12
【问题描述】：

我在此媒体查询中添加以调整图像从桌面到移动时的大小，但它不符合要求。有什么想法吗？

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

当我去看的时候，手机版上还是真的把我的形象炸了。

查看网站部分：nonprofit section

【问题讨论】：

标签： html css image media-queries media

【解决方案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;
}

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

将background-image 更改为background 有效。一旦您进行此更改，background-color 就会变得多余，因为您正在使用 #444 重新定义它。

【讨论】：