我希望背景图片不显示在 IE 中.我怎么做? [英] I want the background picture not to be displayed in the IE. How do I do that?

问题描述

这是 CSS ，我希望背景图片不显示在 IE 中.相反，我只想显示背景颜色.我该怎么做?

Here's the CSS , and I want the background picture not to be displayed in IE . Instead I just want the background color to be displayed. How do I do that?

html, body {    
  margin:0;
  padding: 0;    
  background: #a9ac41;
  background-image: url("background.png");    
  background-repeat: no-repeat;
  background-size: cover;    
  margin:0;
  padding: 0;     
}

推荐答案

我猜这里的问题是background-size.IE8 和更早的版本不支持它，所以你看到你的图像在 IE8 中被弄乱了，你想通过恢复为纯背景来解决它.

I'm guessing that the problem here is background-size. IE8 and earlier don't support it, so you're seeing your image messed up in IE8 and you want to solve it by reverting to a plain background.

首先，我应该告诉您，background-size 在 IE9 及更高版本中是受支持的，因此您无需对所有 IE 版本进行全面更改.您只需要真正解决 IE8 及更早版本中缺乏支持的问题.

Firstly, I should tell you that background-size is supported in IE9 and later, so you don't need to do this as a blanket change for all IE versions. You only really need to deal with the lack of support in IE8 and earlier.

这里有一些选项供您选择:

Here are some options for you:

• 纯 CSS 解决方案:
  您可以利用 CSS 处理未知属性的方式为不支持 background-size 的浏览器提供纯 CSS 回退，方法是将大小指定为简写 background<中的参数/code> 风格:

• Pure CSS solution:
  You can take advantage of the way CSS handles unknown properties to provide a pure CSS fallback for browsers that don't support background-size, by specifying the size as a parameter in a shorthand background style:

background: #a9ac41;
background: url("bgimage.png") cover;

IE8 将完全忽略第二个background，因为不理解cover.其他浏览器会忽略第一个，因为第二个会覆盖它.问题已解决:所有浏览器都有工作背景.

IE8 will ignore the second background entirely because doesn't understand cover. Other browsers will ignore the first one because the second one overrides it. Problem solved: all browsers have a working background.

特征检测解决方案:
您可以使用 Modernizr 之类的工具来测试浏览器对 background-size 的支持，然后使用 Javascript 相应地更改页面(例如，如果支持/不支持，则加载不同的样式表).

Feature detection solution:
You could use a tool like Modernizr to test for browser support of background-size, and then use Javascript to change the page accordingly (eg load a different stylesheet if it is/isn't supported).

过滤解决方案:
尽管 IE8 不支持 background-size，但可以使用 -ms-filter 属性来模拟它，并取得了一定程度的成功.你会使用这样的代码:

filter solution:
Although IE8 doesn't support background-size, it is possible to use the -ms-filter property to emulate it, with some degree of success. You would use code like this:

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

示例取自 MDN

Polyfill 解决方案:
有一些 'polyfill' 脚本可用，它们将一些缺少的 CSS 功能实现到旧 IE 版本中，包括 background-size.在这种情况下，我推荐的是 CSS3Pie.按照 css3pie 网站上的说明进行操作，即使在非常旧的 IE 版本中，您也可以使用标准的 background-size.

Polyfill solution:
There are some 'polyfill' scripts available which implement some of the missing CSS features into old IE versions, including background-size. In this case, the one I'd recommend is CSS3Pie. Follow the instructions on the css3pie site and you'll be able to use standard background-size even in very old IE versions.

希望有所帮助.

这篇关于我希望背景图片不显示在 IE 中.我怎么做?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！