如何在Internet Explorer中启用背景大小[Quicktip]

CSS3附带的新功能不适用于Internet Explorer 8-6，但是我们可以忽略此缺点，因为效果会很好地降低。 例如，不支持CSS3 Box Shadow的浏览器将看不到阴影，但这很好，只要内容仍然可读即可 。

但是，当您应用CSS3 Background Size时，您不能忽略的几件事之一。 我们可以使用新的background-size属性控制通过CSS添加的背景图片 background-size 。 我们可以以精确的单位指定宽度和高度，还可以使背景通过使用cover跟随容器大小并contain值。

cover值将填充容器的整个区域， 并且按比例调整宽度和高度 。 contain值，将推动背景以适合容器的宽度 。 当容器的高度比图像长时，有时会导致空隙。

1.使用CSS3背景大小

请注意，新的background-size属性不能包含在background简写属性background 。 必须像这样分别声明它们。

.container {
	background: url('img/image.jpg');
	background-size: cover;
}

在上面显示的代码段中，我们附加了一个宽度约为3000px的图像。 我们还在其中添加的背景尺寸将防止背景图像溢出内容 。 如上所述，覆盖值将按比例覆盖整个容器。

这就是您将在浏览器中看到的内容。

图片来源： Rafael Chiti

2. Internet Explorer中CSS3背景大小

不幸的是，此功能在Internet Explorer 8及更低版本中无法很好地回退。 如果附加非常大的图像，则可能会使容器溢出 。 另一方面，如果附加的图像非常小，则容器内最终会留有空隙。 从上面的同一示例中，您将在Internet Explorer 8-6中获得以下结果。

因此，我们需要一个可以以某种方式在Internet Explorer中复制CSS3背景大小的polyfill。

3. CSS3背景尺寸Polyfill

这种填充料是由Louis-Rémi开发的。 此polyfill复制具有cover的background-size属性的相同行为并contain值。 此polyfill的格式为HTC文件backgroundsize.htc和.htaccess文件，当从Apache服务器提供页面以发送.htc mime-type时需要使用该文件。

若要使用它，请通过Internet Explorer的behavior属性包含HTC文件，如下所示。

.background-size {
	width: 500px;
	height: 320px;
	background-image: url('img/image.jpg');
	background-size: cover;
	-ms-behavior: url('http://example.com/js/backgroundsize.htc');
}

然后，如果您使用的是Apache服务器，请放置。 htaccess在服务器的根文件夹中，或者简单地将此行添加到现有的.htacces文件（如果可用）中。

AddType text/x-component .htc

就是这样。 您现在可以在Internet Explorer中查看页面。 假设您如上所述设置带有cover的background-size ，您应该发现现在已经调整了背景图像的尺寸，并且可以按比例地放入容器中。 请参阅Internet Explorer 8-6中的以下演示，以实际操作。

• 观看演示
• 下载源

翻译自: https://www.hongkiat.com/blog/css3-background-size-in-ie/