【问题标题】:How to make background-size cover work in IE如何在 IE 中制作背景大小的封面
【发布时间】:2019-07-31 00:09:41
【问题描述】:

我尝试了各种方法,说它会使 background-size:cover;在 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-explorer background-size


    【解决方案1】:

    this article,我们可以看到“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>
    

    此外,您还可以参考this threadthis article 来解决此问题。

    【讨论】:

      猜你喜欢
      • 2015-02-07
      • 2017-05-26
      • 2015-01-30
      • 2016-10-09
      • 2014-09-19
      • 2012-01-31
      • 1970-01-01
      • 2016-02-28
      • 2014-05-11
      相关资源
      最近更新 更多