如何让background-size: cover在IE8+中生效？已尝试多种方法仍无效

兄弟，IE8的兼容坑真的让人头大！你之前试的meta标签、浏览器前缀这些方法，其实都是针对IE9+或者现代浏览器的——IE8本身就完全不支持background-size: cover这个CSS属性，所以那些操作自然起不到作用。针对你的模板需求（背景图需要内联），给你两个靠谱的解决方案：

方案1：用IE8专属滤镜模拟cover效果 #

IE8支持AlphaImageLoader滤镜，可以用来模拟background-size: cover的拉伸效果。因为你的背景图是内联设置的，我们可以结合条件注释和JS来动态给IE8设置滤镜：

步骤1：保留原有CSS（针对现代浏览器） #

.-bg-image-70 {
  min-height: 70vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

步骤2：添加IE8专属处理代码 #

在HTML中加入这段条件注释的JS，只会在IE8下执行：

<!--[if IE 8]>
<script>
  // 找到所有带-bg-image-70类的元素
  var bgElements = document.querySelectorAll('.-bg-image-70');
  for(var i = 0; i < bgElements.length; i++){
    // 提取内联的背景图URL
    var bgUrl = bgElements[i].style.backgroundImage.replace(/url\(['"]?(.*?)['"]?\)/, '$1');
    // 设置IE滤镜实现拉伸
    bgElements[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ bgUrl +"', sizingMethod='scale')";
    // 去掉原生背景图，避免冲突
    bgElements[i].style.backgroundImage = "none";
  }
</script>
<![endif]-->

⚠️ 注意：滤镜会让元素内的链接失效，给内部需要点击的元素加position: relative就能解决这个问题。

方案2：用img标签模拟背景图（更稳定） #

如果滤镜的小问题让你觉得麻烦，不如换个思路：把背景图用<img>标签嵌入容器，绝对定位铺满整个区域，内容层放在上层。这个方法所有浏览器（包括IE8）都能完美支持，而且效果和cover几乎一致：

HTML结构 #

<div class="-bg-image-70">
  <!-- 背景图，用img标签实现拉伸效果 -->
  <img src="https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_960_720.jpg" alt="" class="bg-img">
  <!-- 内容层，需要设置相对定位和z-index -->
  <div class="container" style="position: relative; z-index: 1;">
    <h1>Hello!</h1>
  </div>
</div>

对应CSS #

.-bg-image-70 {
  min-height: 70vh;
  position: relative;
  overflow: hidden; /* 裁剪超出容器的图片部分 */
}
.bg-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  /* 现代浏览器用transform居中 */
  transform: translate(-50%, -50%);
  /* IE8不支持transform，用滤镜模拟居中 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, DX=-50%, DY=-50%)";
}

这个方案不需要考虑滤镜的兼容性问题，而且背景图的显示效果和background-size: cover完全一致，非常适合做模板使用。

内容的提问来源于stack exchange，提问作者Yan Mak