CSS - 如何设置背景图像以在 IE11 中拉伸答案

【问题标题】：CSS - How Do I Set a Background Image To Stretch In IE11CSS - 如何设置背景图像以在 IE11 中拉伸
【发布时间】：2014-03-19 21:19:57
【问题描述】：

如何在 Internet Explorer 11 中设置背景图像以进行拉伸？这是我正在使用的 CSS 代码（适用于除 IE 之外的所有其他浏览器）：

  body {
background: url('/image.png') no-repeat center center fixed;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image.png', sizingMethod='scale')";
}

【问题讨论】：

你是否在某个地方设置了它的高度？
另外，去掉-position和-repeat有什么影响，因为它们已经在第一行定义了？

标签： html css image background stretch

【解决方案1】：

background: url('/image.png') no-repeat center center fixed;
background-size: cover;

将 baground-size 设置为覆盖

【讨论】：

你能解释一下结果吗？ “不起作用”有点难以调试。 :contain 有效吗？

【解决方案2】：

 body {
       background: url('/image.png') no-repeat center center fixed;
       background-repeat: no-repeat;
       background-position: center;
       -webkit-background-size: 100% 100%;
       -moz-background-size: 100% 100%;
       -o-background-size: 100% 100%;
       background-size: 100% 100%;
       filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image.png', sizingMethod='scale');
       -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/image.png', sizingMethod='scale')";

       min-height: 100%;
       min-width: 1024px;

       width: 100%;
       height: auto;

       position: fixed;
       top: 0;
       left: 0;
 }

还有你在用这个做什么？，你是要制作封面图吗？

 -webkit-background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 background-size: 100% 100%;

如果是这样，试试这个

 background: url('/image.png') no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

【讨论】：