移动设备的单独背景图像

Question

我的网站是http://www.rosstheexplorer.com/

在手机上，背景图片太小，不符合我的喜好。

我使用插件'将背景大小添加到自定义程序'来降低背景图像的高度。在台式机上，我不希望背景占用整个页面。

我可以更改手机背景图片的尺寸，还是拥有完全独立的图片？有没有可以实现这个的插件，还是有一些我可以使用的CSS代码？

Answer 1

您可以使用完全独立的图像，甚至可以使用媒体查询根据自己的喜好调整图像大小。例如， 对于桌面，

.block {
  background-image: url('images/bg1.jpg');
  background-repeat: no-repeat;
  background-size: 500px;
}

对于手机（比如iphone 6 +），

@media screen and (max-width: 414px) {
  background-image: url('images/bg2.jpg');
  background-repeat: no-repeat;
  background-size: 500px;
}

OR

@media screen and (max-width: 414px) {
  background-image: url('images/bg1.jpg');
  background-repeat: no-repeat;
  background-size: 100px;
}

Answer 2

<img scr="facebook.svg"> - 是的，您可以通过对移动设备使用CSS媒体查询来实现此目的。您可以 - 提供不同的尺寸或提供不同的图像。

要了解有关媒体查询的更多信息，请参阅this