Question

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

＆＃13;

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

＆＃13;

当我去观看时，它仍然在手机版本上炸毁我的图像。

请参阅网站部分：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;
}

在这里，您要向background-image提供多个参数，这些参数只需要一个参数url()。我认为您正在寻找background属性，它允许您一次设置多个背景属性。

将background-image更改为background有效。完成此更改后，background-color会因您使用#444重新定义而变得多余。

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

1 个答案: