Question

我在这里有一个临时应用。

https://equator1248.herokuapp.com

我已经验证了在Chrome中一切正常，但是在Safari中我的背景图片没有显示。

相关代码直接显示：

<html>
  <head>
    <link rel="apple-touch-icon" href="_images/favicon.png">
    <script type="text/javascript" src="arc.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="bundle.js"></script>
    <style>
      body{
        background-image: url('_images/background.png');
        background-size: cover;
      }
    </style>
  </body>
</html>

似乎符合以下条件的简单属性：

https://css-tricks.com/almanac/properties/b/background-size/

如果我删除以下行，便可以使Safari运行：

background-size: cover;

但是我没有得到想要的掩盖效果。

我刚刚证实了

background-size: contain;

也将其破坏。

像400px这样的单个值也会破坏它。您似乎不喜欢此属性的任何价值。

Answer 1

请尝试以下代码background-size: 100% 100%;，但这可能会使其他浏览器（chrome等）上的背景图像变形。

这是您的问题的绝望解决方案，使用服务器端代码找到用户代理，然后在<head>部分为此问题编写CSS。

Answer 2

我认为这与totally supported on Safari的background-size:cover无关，而与您的网络服务器发送错误的content-type的图像有关。所有图像在我的控制台中都显示为txt，而在其他网站上则没有。

来源：我（大概）与您的设置相同。 Macbook Air，Safari，macOS High Sierra 10.13.6。

Answer 3

我有同样的问题。在不断尝试使其双方都能正常工作之后，我想到了使用 calc（）属性。

因此，方法如下：您只需使用devTool检查图像尺寸即可从chrome浏览器中获取图像尺寸，或者如果您已设置图像的宽度和高度，则只需执行以下操作即可：

您首先指定高度：，然后最后使用calc（）属性给出宽度 width：calc（675px +（730.16-675）*（100vw-1200px）/（1365-1200））;

两个675像素是它将计算的起始宽度 730.5px是结束宽度，即最后一个宽度。

两个1200像素是我要缩放图像的屏幕的起始宽度。 1365是我要缩放图像的结束宽度或最后宽度。

，所以几乎就像@media（最小宽度：1200px）和（最大宽度：1365px）{}。还要确保只使用一个单元，就像我在这里所做的一样。

我只是建议在这里使用px与calc（）一起使用。如果您确实将单位设置为％或其他单位，则只需检查该尺寸，然后在calc（）中对其进行检查即可。

背景大小：Safari的封面中断，但Chrome没有

3 个答案: