CSS 背景尺寸：封面在谷歌浏览器中突然停止工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11811203/
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-size: cover suddenly stopped working in Google Chrome?
提问by malfy
Is anyone else having this issue? I create websites for a living, and some employ the use of the css property background-size: cover. All of the sudden about 1 week ago, all of the sites with this property no longer display right in Google Chrome. (all other browsers are working fine.) Is anyone else experiencing this? Is it just MY google chrome or did something change? Because the backgrounds were displaying properly until about a week ago, and I did not changeanything. They just stopped displaying properly, seemingly out of nowhere....
还有其他人有这个问题吗？我以创建网站为生，有些使用 css 属性background-size: cover。突然之间，大约 1 周前，所有具有此属性的网站都不再正确显示在 Google Chrome 中。（所有其他浏览器都工作正常。）还有其他人遇到过这种情况吗？它只是我的谷歌浏览器还是做了什么改变？因为直到大约一周前背景才正常显示，我没有做任何改变。他们只是停止正常显示，似乎无处不在......
回答by malfy
Best practice: always set background-image first and then background-size.
最佳实践：始终先设置 background-image，然后再设置 background-size。
回答by gregs67
You only need to use !important :
您只需要使用 !important ：
background-size: cover !important;
回答by wrydere
I just ran into this problem in Chrome, too.
我也刚刚在 Chrome 中遇到了这个问题。
None of the above answers worked for me. Specifically, I was trying to set the <body>element background to background-size: cover. However, the background image would never extend vertically to fill the page.
以上答案都不适合我。具体来说，我试图将<body>元素背景设置为background-size: cover. 但是，背景图像永远不会垂直扩展以填充页面。
After some trial and error, I found that setting the <html>element width and height to 100% fixed the problem in Chrome. (For what it's worth, changing the <body>element's width and height seemed to have no effect.)
经过一些试验和错误，我发现将<html>元素宽度和高度设置为 100% 解决了 Chrome 中的问题。（就其价值而言，更改<body>元素的宽度和高度似乎没有效果。）
In my css, I have the following rules to fix the issue:
在我的 css 中，我有以下规则来解决这个问题：
html {
width: 100%;
height: 100%;
}
回答by Brian Webster
The following is a solution to the problem, but it won't be for everybody. I estimate that this solution will help a minority of the people experiencing the author's problem.
以下是该问题的解决方案，但并不适合所有人。我估计这个解决方案将帮助遇到作者问题的少数人。
The background-size option can stop working in chrome if your container is too small, vertically, compared to your background image.
如果容器在垂直方向上与背景图像相比太小，则背景大小选项可能会停止在 chrome 中工作。
I was in a situation where I had to position a small portion of a large background image across a div that was 7 pixels tall.
我曾经遇到过必须在 7 像素高的 div 上放置大背景图像的一小部分的情况。
In the Chrome debugger, changing the div height to 9 pixels "snapped" the background-size into place.
在 Chrome 调试器中，将 div 高度更改为 9 像素将背景大小“对齐”到位。
My ultimate solution was to restructure my divs so that I would not run into this problem.
我的最终解决方案是重组我的 div，这样我就不会遇到这个问题。
To see if this solution will help you, in the Chrome debugger, enlarge your div. If, at some point, the background-size snaps into place, then you know this is the issue.
要查看此解决方案是否对您有帮助，请在 Chrome 调试器中放大您的 div。如果在某个时候，背景大小卡入到位，那么您就知道这就是问题所在。
回答by Josua Marcel Chrisano
You must do CSS hacks for google chrome.
你必须为谷歌浏览器做 CSS hacks。
Use body:nth-of-type(1) .elementOrClassName{property:value;}
only for google chrome.
仅适用于谷歌浏览器。
for your case,
对于你的情况，
nth-of-type(1) .elementOrClassName{background-size:80px 60px;}
回答by AlwaysANovice
I was having the same problem all of a sudden w/ not only GC but also FF and Opera. i was using a php function to pull random images for my background and this is what i had....
我突然遇到了同样的问题，不仅是 GC，还有 FF 和 Opera。我正在使用 php 函数为我的背景提取随机图像，这就是我所拥有的....
CSS:
CSS：
.main-slideshow .video img {
cursor:pointer;
width:550px !important;
height:340px !important;
background-repeat: no-repeat;
-moz-background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover; }
and HTML/PHP:
和 HTML/PHP：
$result .='<img alt="" style="background:url('.$thumbnail.')" src="/images/play1.png" /> ';
it was working for some days and suddenly background-repeatand background-sizestopped working. so this morning i found out that the following changes are working perfectly for GC (v21), FF (v14), Opera (v12) and Safari (v5.1.7)...still no luck w/ IE though :(
这是工作了一些日子，突然background-repeat而background-size停止工作。所以今天早上我发现以下更改对 GC (v21)、FF (v14)、Opera (v12) 和 Safari (v5.1.7) 来说是完美的……尽管 IE 仍然没有运气:(
CSS:
CSS：
.main-slideshow .video img {
cursor:pointer;
width:550px !important;
height:340px !important;
-moz-background-size:cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover; }
HTML/PHP:
HTML/PHP：
$result .='<img alt="" style="background-image:url('.$thumbnail.')" style="background-repeat: no-repeat" style="background-size:cover" src="/images/play1.png" />';
may be it's a lousy solution but it's working for me (so far) hope this helps some one :)
可能这是一个糟糕的解决方案，但它对我有用（到目前为止）希望这对某人有所帮助:)
回答by Dave Bergschneider
Old question but has similiar issue and it turned out I needed to add and to the empty div's I was applying background-size: coverto.
老问题，但有类似的问题，结果我需要添加和 我申请的空 div background-size: cover。
回答by Michele Caggiano
You can fix the problem by setting the height of the tag. For example, if you have a page that has a background image, set the height of the html and body tags in the CSS, like so:
您可以通过设置标签的高度来解决该问题。例如，如果您有一个带有背景图像的页面，请在 CSS 中设置 html 和 body 标签的高度，如下所示：
html { height:100%; min-height:100%; } body{ min-height:100%; }
hope this helps
希望这可以帮助
回答by Vinay Mehta
Try this background-size:contain;
试试这个 background-size:contain;
回答by Amit Bhagat
For me, following worked for Chrome, IE 8, IE 9:
对我来说，以下适用于 Chrome、IE 8、IE 9：
.itemFullBg{
background:url('image/path/name.png') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size:100% 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='image/path/name.png',sizingMethod='scale');
}
