如何制作一个完全响应的背景图像，即使在 iPhone Safari 中也可以使用？

Posted 2023-03-06

【中文标题】如何制作一个完全响应的背景图像，即使在 iPhone Safari 中也可以使用？

【英文标题】：How to make a fully responsive background image that works even in iPhone Safari?

【发布时间】：2015-11-30 19:30:18

【问题描述】：

我尝试了不同的方法，大多数人建议使用img 而不是background-image 以获得完美的结果，但我想知道是否可以通过一些技巧来解决这个问题并拥有全角背景图片?

Here's my live website that I have problem with

【问题讨论】：

查看this link，如果你没有尝试过，这是一个很好的方法。

【参考方案1】：

由于您不需要 img 来垂直填充页面，并且我认为您希望整个图像水平适合，这就是我的做法。

body  
  background: url(http://lorempixel.com/400/200/sports/) no-repeat center center fixed; 
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;

见小提琴http://jsfiddle.net/DIRTY_SMITH/x131ofex/3/