我是否可以为背景大小只有CSS-后备？ [英] Can I implement a CSS-only fallback for background-size?

问题描述

这非常适用于支持背景大小浏览器。否则，2倍图像放大。

This works well for browsers that support background-size. Otherwise the 2x image is zoomed.

.a {
  background-image: url(img2x.jpg); /* 1000x1000 */
  background-size: 100%;
  height: 500px;
  width: 500px;
}

这应该用于浏览器，而不背景大小的支持。

This should be used for browsers without background-size support.

.a {
  background-image: url(img1x.jpg); /* 500x500 */
  height: 500px;
  width: 500px;
}

是否有可能欺骗浏览器的时候背景大小不支持到回落？我知道我可以使用 @supports ，但它更支持比背景大小所以在这种情况下，毫无意义。我并不想要么使用JavaScript。

Is it possible to trick the browser to fallback when background-size is not supported? I know I can use @supports but it's much less supported than background-size so quite pointless in this case. I don't want to use JavaScript either.

基本上像这样，除了工作还是工作！

Basically like so, except work!

.a {
  background-image: url(img1x.jpg); /* 500x500 */
  height: 500px;
  width: 500px;
  /* stop parsing this rule when background-size is not supported */
  /* otherwise continue parsing and set different background-image */
  background-size: 100%;
  background-image: url(img2x.jpg); /* 1000x1000 */
}

这不明明工作，但有一个窍门这可能使它工作？谢谢你。

This doesn't work obviously, but is there a trick which could make it work? Thanks.

推荐答案

一个CSS-只回退为背景大小是棘手的，但肯定是可以做到的。

A CSS-only fallback for background-size is tricky, but yes it can be done.

诀窍是使用短格式背景的风格来设置不同的背景属性，而不是使用个人风格像背景大小，背景图片等

The trick is to use the short-form background style to set the various background properties, rather than using the individual styles like background-size, background-image, etc.

所以你的情况，你有这样的事情：

So in your case, you would have something like this:

background: url(img2x.jpg) 0% 0%/100%;

（即 0％0％是背景位置（0％0％是默认值），这是采用短式风格），当背景大小值之前必需的。

(The 0% 0% is for background-position (0% 0% is default) which is required before the background-size value when using the short-form style).

到目前为止，我所做的是凝结在现有的code到一个单一的短式CSS线，但聪明的一点是，我们现在已经做到了这一点，不承认一个浏览器背景大小将扔掉整条生产线，而不是仅仅丢掉背景大小自身。

So far, all I've done is condense your existing code into a single short-form CSS line, but the clever bit is that now we've done this, a browser that doesn't recognise background-size will throw away the whole line, rather than just throwing away the background-size on its own.

这意味着我们可以对旧版浏览器指定一个完全不同的背景值。

This means that we can specify an entirely different set of background values for older browsers.

background: url(ie8bg.jpg);   /* Shown by IE8 and other old browsers */
background: url(img2x.jpg) 0% 0%/100%;  /* shown by new browsers with background-size support*/

您可以在这里看到这行动的示范。现代浏览器将获得一个背景图片，通过100％背景大小设置，旧的浏览器（如IE8）拉伸将得到一个完全不同的图像，没有任何拉伸

You can see a demonstration of this in action here. Modern browsers will get the one background image, stretched by a 100% background-size setting, and older browsers (like IE8) will get the an entirely different image, without any stretching.

既然你定义旧的浏览器完全独立的后台，你甚至可以做这样的事情有IE8的，而不是同时还提供其他浏览器图像的图像了坚实的背景颜色。

Since you get to define an entirely separate background for old browsers, you can even do things like have a solid background colour for IE8 rather than an image while still providing an image for other browsers.

所以，是的，一个完全的CSS解决方案，让您有一个后备的不支持的浏览器背景大小。

So yes, a fully CSS solution that gives you a fallback for browsers that don't support background-size.

希望有所帮助。

浏览器的兼容性可以在这里一个小问题。有些浏览器可能支持背景大小，但不支持它作为背景短语法的一部分。在大多数情况下，这仅适用于旧的浏览器（如火狐7），但它仍然是在Safari中的当前版本中的问题。这意味着，随着这种技术，Safari会看到回退的背景下，即使它真正支持背景大小。

Browser compatibility may be a minor issue here. Some browsers may support background-size but not support it as part of the background short syntax. For the most part this applies only to older browsers (eg Firefox 7), but it is still a problem in current versions of Safari. What this means is that with this technique, Safari will see the fall-back background, even though it does actually support background-size.

这显然是不理想的，但它是由一个事实，即它至少会获得后备形象，这意味着页面至少应该看行不行，如果不是很不如在其他浏览器缓解。希望在Safari这个问题将在未来的版本。

This obviously isn't ideal, but it is mitigated by the fact that it will at least get the fallback image, which means the page ought to at least look okay, if not quite as good as in other browsers. Hopefully this issue in Safari will be fixed in a future version.

在此期间，这点不从事实，这答案是问题的有效的解决方案减损 - 它确实提供纯CSS一个后备选项

In the meanwhile, this point doesn't detract from the fact that this answer is a valid solution to the question - it does indeed provide a fallback option in pure CSS.

在这个问题光我写在主题博客文章，其中希望涵盖它更详细地，并提供其它的选择，如果这个CSS后备解决方案是不充分的。

In light of this question I've written a blog post on the subject, which hopefully covers it in more detail and provides other options if this CSS fall-back solution isn't sufficient.

这篇关于我是否可以为背景大小只有CSS-后备？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！