没有在Safari中显示的背景图像

时间：2013-06-27 11:19:03

标签： html css safari responsive-design

我正在开发一个响应式设计，而“bgMainpage”这个类有一个背景图片，但它并没有在Safari上显示所有设备。我已经应用了背景大小封面，因为它是客户想要的。我也添加了浏览器特定的CSS，我不知道还有什么可以这样做，它也出现在Safari中。 Chrome，FF，IE显示图像就好了。有什么想法吗？

Project Link

CSS：

.bgMainpage{
    background:url("../images/bg.jpg") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}

18 个答案:

答案 0 :(得分：31)

Safari有一个明显的错误，即如果满足某些条件，它将不会在背景中显示某些类型的jpg / JPEG图像。对于在线使用，有一种称为渐进式JPEG的jpg图像。常规jpg图像从上到下对图像数据进行编码，您可以看到它们在线加载。另一方面，渐进式JPEG以逐渐更高的细节对图像进行编码。这意味着它首先加载模糊然后变得更清晰。有些人认为这在网上看起来更好，这就是它被使用的原因。一些图像优化器会自动使jpgs渐进式在线使用。

根据我的经验，当满足以下某些条件时，Safari将不会显示jpgs：

  • 使用渐进式编码
  • 图像是背景（对于元素或整个页面）
  • 图像很大（我不知道究竟有多大，但我遇到了数千像素宽的图像问题）
  • 可能还有其他事情，我还没有完全探讨过这个错误

我无法在除Safari之外的任何浏览器中重新创建此项。

要解决此问题，您可以重新保存图像，确保图像不是渐进格式（photoshop等有此选择器），或使用其他格式（gif，png等）< / p>

答案 1 :(得分：13)

我有同样的问题，我通过更改：

解决了这个问题 
background: url("images/backgroundimage.jpg") no-repeat fixed 0 0 / cover rgba(0, 0, 0, 0);

为：

    background: url("images/backgroundimage.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;

现在在safari中运作良好：）

答案 2 :(得分：10)

我从谷歌搜索页面到这里，所以万一这个问题出现在别人身上，请确保仔细检查你的代码。 Safari可能对正确的代码非常挑剔，因此即使在问题中输入正确，也只需对其进行双重检查即可。如果您忘记了最后的括号，它将无法显示，Chrome等其他浏览器会假设您打算放置并正确呈现页面。确保所有代码都正确打开/关闭：

#!/bin/bash -e # enter in your different git projects REPOS=( /Users/you/repo1 /Users/you/repo2 /Users/you/repo3 /Users/you/repo4 ) MOVE="Moving to next REPO... \n" tput setaf 2;echo "What do ya wanna do? You can say push, pull, commit, ftp push, or status"; tput sgr0 read input if [ $input = "commit" ] then tput setaf 2;echo "Do you want a unique commit message? [y/n]";tput sgr0 read ans if [ $ans = "y" ] then for i in "${REPOS[@]}" do cd "$i" tput setaf 6;pwd;tput sgr0 git add . -A read -p "Commit description: " desc git commit -m "$desc" tput setaf 2;echo $MOVE;tput sgr0 sleep 1 done else for i in "${REPOS[@]}" do cd "$i" tput setaf 6;pwd;tput sgr0 git add . -A git commit -m "autocommit backup point" tput setaf 2;echo $MOVE;tput sgr0 sleep 1 done fi elif [ $input = "push" ] || [ $input = "pull" ] || [ $input = "ftp push" ] || [ $input = "status" ] then for i in "${REPOS[@]}" do cd "$i" tput setaf 6;pwd;tput sgr0 git $input tput setaf 2;echo $MOVE;tput sgr0 sleep 1 done else tput setaf 1;echo "Sorry, thats not on the list";tput sgr0 fi

答案 3 :(得分：6)

有问题并发现了这一点，但没有任何效果。最终发现URL（）缺少其右括号。即使没有它，背景图像也适用于IE 9 +，Edge，Chrome和Firefox。只有经测试的浏览器中的Safari才显示背景图像。

添加了），一切正常。

答案 4 :(得分：5)

我遇到了与Safari相同的问题。我尝试了其他解决方案，唯一对我有用的是删除负z-index 。

答案 5 :(得分：3)

我将图像格式从jpeg转换为gif并且工作正常。所以最终的CSS是：

.bgMainpage{
    background:url("../images/bg.gif") no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;
}

答案 6 :(得分：1)

我遇到了同样的问题。我的形象是进步的，就像JC Hulce回答的那样，safari有一个错误。
要检查您的图片是否是渐进式，请转到：techslides.com/demos/progressive-test.html 要修复刚刚在photoshop中打开并转到菜单文件 - >保存为网页

答案 7 :(得分：1)

可能因为图片被错误地保存了。我曾经遇到过这个问题，不得不改变以下内容：

在photoshop中打开你的照片并将其保存为“cmyk”这个选项应该在视图中可更改，configure-proof，cmyk-colors（抱歉，我的photoshop全部是德语）

希望这会有所帮助

答案 8 :(得分：1)

尝试更改或删除::: 

background-attachment:fixed;

它在野生动物园中的作品.....

答案 9 :(得分：1)

请尝试使用以下代码，您可能需要更改宽度和高度以及网址。

＆＃13;
＆＃13; 
.gallery {
   height: 190px;
   width: 940px;
   margin-bottom: 13px;
   background-color: transparent;
   background-image: url("/img/user/admin/photo.jpg");
   background-repeat:no-repeat;
   background-position: center bottom;
   background-attachment: scroll;
   background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}
＆＃13;
＆＃13;
＆＃13;

答案 10 :(得分：1)

我刚刚遇到了这个问题，所提出的解决方案都没有解决这个问题。我确实解决了我的实例，这是由于混合协议：网站是https而bg图像是http。这导致图像的加载无声地失败，并且不仅在Safari上，在MacOS上显示，并且仅对某些用户显示。

答案 11 :(得分：1)

我遇到了同样的问题，解决方案非常奇怪，但是我会在这里发布它，以防它对某人有用。

我有以下代码：

footer {
  margin-top: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("footer.png");
  background-repeat: repeat;
  -o-background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}

背景图片未在野生动物园中显示，但是当我删除display: flex行时，它正确显示，其他浏览器没有任何变化。我现在不知道这是为什么以及如何起作用的，但是也许它将对某人有所帮助。

答案 12 :(得分：0)

我有同样的问题，这里没有其他解决方案解决了这个问题。对我来说，我在一个包裹在div中的锚上有一个背景图像。除了Safari 6之外，所有浏览器都处理了背景图像。对我来说，修复是设置位置：相对于div和位置：绝对在锚链接上。

答案 13 :(得分：0)

试试这段代码。

.bgMainpage{
    background:url(../images/bg.jpg) no-repeat scroll right top #000000;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size:cover;
    background-size: cover;

答案 14 :(得分：0)

似乎safari不喜欢：

background-attachment: fixed;

但我仍然希望有一些视差，特别是在台式机上。所以，我的解决方案是从普通的.header类中删除上面的内容并将其放在：

之下 
@media(min-width: 1334px)

这可以通过iPad在大多数iPhone上显示我的图像。它只是不包括iPhone 6 Plus。这款手机的解决方案正在进入桌面领域。

答案 15 :(得分：0)

我遇到了类似的问题，但我无法控制图像，因为它是由tumblr产生的，因此渐进式建议并不起作用。我仔细检查了我的代码和其他任何建议的内容，最后我尝试使用background-image设置MIN-HEIGHT到div，并且Safari最终像其他浏览器一样显示它。希望有助于摆脱一些头痛。

答案 16 :(得分：0)

将background属性更改为background-image，每个人都是赢家。

答案 17 :(得分：0)

我的问题是CSS的简短格式

background: url('image.png') no-repeat scroll center center #mycolor;

是背景色。解决方案就是简单地将其放在单独的元素样式中，例如此处

background: url('image.png') no-repeat scroll center center;
background-color: #mycolor;
相关问题
最新问题