时间戳

首页 > 解决方案 > 如何在 IE 中制作背景大小的封面

internet-explorer - 如何在 IE 中制作背景大小的封面

问题描述

我尝试了各种说它会制作背景大小的方法：封面；在 IE 中工作（需要涵盖 IE8+ 的版本），其中...。- 为 IE=edge 和 chrome=1 添加了元数据 - 将所有三个“-mos-”添加到类中 - 另外，尝试将所有内容都放入一种行格式（但这不是我的结果，因为我正在为其他人构建模板，后台链接需要内嵌。

我还错过了什么？？

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

  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-ie-background-size: cover;

}
  <div class="-bg-image-70" style="background-image: url(https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512_960_720.jpg);" >

<div class="container"  ><h1>Hello!</h1></div>
        </div>

标签： internet-explorerbackground-size

解决方案

从这篇文章中，我们可以看到“background-size:cover;” 支持 IE 9+，因此您的代码无法在 IE 8 浏览器中运行。我建议您可以为容器 div 和背景图像设置宽度和高度属性。像这样：

<style>
    .-bg-image-70 {
        background: url("http://3.bp.blogspot.com/_EqZzf-l7OCg/TNmdtcyGBZI/AAAAAAAAAD8/KD5Y23c24go/s1600/homer-simpson-1280x1024.jpg") no-repeat;
        width: 900px;
        height: 450px;
        border: 1px solid;
        background-size: 1300px 700px;
    }
</style>
<div class="-bg-image-70">
    <div class="container"><h1>Hello!</h1></div>
</div>

此外，您还可以参考此线程和本文来解决此问题。

推荐阅读