Html 背景图像未在 Safari 中显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17341728/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background image not showing in Safari
提问by AspiringCanadian
I am working on a responsive design and the class "bgMainpage" is having a background image but it is not showing on Safari on all the devices. I have applied background size cover as it is what the client wants. I have added browser specific CSS too and I am not sure what else to do so that it shows up in Safari too. Chrome, FF, IE show the image just fine. Any ideas ?
我正在研究响应式设计，并且“bgMainpage”类有一个背景图像，但它没有在所有设备上的 Safari 上显示。我已经应用了背景尺寸封面，因为这是客户想要的。我也添加了浏览器特定的 CSS，但我不知道还能做什么，以便它也显示在 Safari 中。Chrome、FF、IE 显示图像就好了。有任何想法吗 ？
CSS :
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;
}
采纳答案by AspiringCanadian
I converted the image format from jpeg to gif and it worked. So the final CSS is :
我将图像格式从 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;
}
回答by JC Hulce
Safari has an apparent bug where it won't show some jpg/JPEG images of a certain type in backgrounds if some criteria are met. For online use there is a type of jpg image called Progressive JPEG. Regular jpg images encode the image data from top to bottom, and you can see them load that way online. Progressive JPEG, on the other hand, encodes the image in progressively higher detail. This means that it loads fuzzy at first and then gets clearer. Some people think this looks better online, which is why it's used. Some image optimizers will automatically make jpgs progressive for online use.
Safari 有一个明显的错误，如果满足某些条件，它不会在背景中显示某些类型的 jpg/JPEG 图像。对于在线使用，有一种称为渐进式 JPEG 的 jpg 图像。常规 jpg 图像从上到下对图像数据进行编码，您可以在网上看到它们以这种方式加载。另一方面，渐进式 JPEG 以逐渐更高的细节对图像进行编码。这意味着它首先加载模糊，然后变得更清晰。有些人认为这在网上看起来更好，这就是使用它的原因。一些图像优化器会自动使 jpg 渐进式以供在线使用。
In my experience, Safari won't display jpgs when some of the following criteria are met:
根据我的经验，当满足以下某些条件时，Safari 不会显示 jpg：
- progressive encoding is used
- the image is a background (for an element or the whole page)
- the image is large (I don't know how big exactly, but I ran into problems with images that were in the thousands of pixels wide)
- possibly other things, I haven't fully explored this bug
- 使用渐进式编码
- 图像是背景（对于元素或整个页面）
- 图像很大（我不知道具体有多大，但我遇到了宽度为数千像素的图像的问题）
- 可能还有其他事情，我还没有完全探索这个错误
I have not been able to recreate this in any browser except Safari.
我无法在除 Safari 之外的任何浏览器中重新创建它。
To fix this, you can either re-save the image, making sure that it isn't in a progressive format (photoshop, etc have a selector for this), or use another format (gif, png, etc)
要解决此问题，您可以重新保存图像，确保它不是渐进式格式（photoshop 等具有用于此的选择器），或使用其他格式（gif、png 等）
回答by Mehar
I have the same issue and I have solved this issue by changing:
我有同样的问题，我已经通过更改解决了这个问题：
background: url("images/backgroundimage.jpg") no-repeat fixed 0 0 / cover rgba(0, 0, 0, 0);
to:
到：
background: url("images/backgroundimage.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
and that is working good in safari now :)
现在在 safari 中运行良好:)
回答by PBwebD
I got here from a google search page, so in case this issue comes up for someone else, just make sure you double check your code. Safari can be very picky about correct code, so even if it's typed correctly here in the question, just do a double check of that. If you forget the end parenthesis, it won't show, where other browsers like Chrome will assume you meant to put it and render the page correctly. Make sure all of your code is properly opened/closed:
我是从谷歌搜索页面来到这里的，所以如果其他人遇到了这个问题，请确保你仔细检查你的代码。Safari 可能对正确的代码非常挑剔，所以即使在问题中输入正确，也只需仔细检查一下。如果您忘记了结尾括号，它不会显示，其他浏览器（如 Chrome）会假设您打算放置它并正确呈现页面。确保您的所有代码都已正确打开/关闭：
<div style="background-image:url('../images/bg.jpg');">HEY</div>
<div style="background-image:url('../images/bg.jpg');">HEY</div>
回答by Bj?rn Stenfeldt
Had the problem and found this, but nothing worked. Eventually found out that URL() was missing its closing parentheses. Even without it, background images worked on IE 9+, Edge, Chrome and Firefox. Only Safari, of the tested browsers, did not show background images.
遇到了问题并找到了这个，但没有任何效果。最终发现 URL() 缺少其右括号。即使没有它，背景图片也适用于 IE 9+、Edge、Chrome 和 Firefox。在经过测试的浏览器中，只有 Safari 没有显示背景图像。
Added the ) and everything worked.
添加了 ) 并且一切正常。
回答by Jonathan
I had the same problem with Safari. I tried other solutions, the only thing that worked for me was to remove a negative z-index.
我在 Safari 上遇到了同样的问题。我尝试了其他解决方案，唯一对我有用的是删除负 z-index。
回答by Balvant Ahir
Try to change or remove :::
尝试更改或删除 :::
background-attachment:fixed;
its works for me in safari.....
它在 safari 中对我有用.....
回答by caramba
maybe because the picture is saved wrongly. I had this problem once to and had to change the following:
可能是因为图片保存错误。我曾经遇到过这个问题，不得不更改以下内容：
open your picture in photoshop and save it "cmyk" this option should be changeable in the view, configure-proof, cmyk-colors (sorry, my photoshop is all in german)
在 photoshop 中打开您的图片并将其保存为“cmyk”此选项在视图中应该是可更改的，配置证明，cmyk 颜色（对不起，我的 photoshop 都是德语）
hope this helps
希望这可以帮助
回答by Zeev G
I had the same problem. my image was progressive and like JC Hulce answered, safari has a bug with that.
To check if your image is progressive go to: techslides.com/demos/progressive-test.html.
To fix just open in photoshop and go to the menu file->save for web
我有同样的问题。我的形象是进步的，就像 JC Hulce 回答的那样，safari 有一个错误。
要检查您的图像是否是渐进式的，请访问：techslides.com/demos/progressive-test.html。
要修复只需在photoshop中打开并转到菜单文件->保存为网络
回答by theniceninja
It seems safari doesn't like:
Safari 似乎不喜欢：
background-attachment: fixed;
But I still want to have some parallax, especially on desktops. So, my solution was to remove the above from the plain .header class and put it under:
但我还是想有一些视差，尤其是在台式机上。所以，我的解决方案是从普通的 .header 类中删除上面的内容并将其放在：
@media(min-width: 1334px)
This has my image displayed on most iPhones up through the iPad. It just doesn't cover iPhone 6 Plus. This phone's resolution is getting into desktop territory.
这使我的图像通过 iPad 显示在大多数 iPhone 上。它只是不包括 iPhone 6 Plus。这款手机的分辨率正在进入桌面领域。
