Question

在IE 9+中，使用background-size: cover很好，除非与jQuery一起使用以扩展元素的高度。背景像它的假设一样伸展，但它留下了前一个高度的一些背景图像伪影。

仅当存在滚动条时才会发生。如果用户花时间去做，那么重新调整窗口大小可以修复它。

您可以在此处查看问题： https://jsfiddle.net/g2afLhv5/4/

有没有办法使用JS或CSS？

Answer 1

尝试使用<div class="body-wrapper">包装内容并将背景图像应用于此包装器。

$('.t1').click(function() {
  $('.box').css('height','900px');
});
$('.t2').click(function() {
  $('.box').css('height','1900px');
});

body {
  margin:0;
}

.body-wrapper {
  background:url('http://i.imgur.com/b7RXF5u.gif') center 0 no-repeat;
  background-size: cover;
  padding: 0 50px;
}

.box {
  margin: 50px 0;
  background: rgba(255,255,255,0.8);
  min-height: 900px;
  clear: both;
  border: 2px solid red;
}
.tabs {
  float: right;
}
.tabs div {
  float: left;
  border: 1px solid black;
  background-color: white;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body-wrapper">
  <div class="tabs">
    <div class="t1">Tab1</div>
    <div class="t2">Tab2</div>
  </div>
  <div class="box"></div>
</div>

Answer 2

您只需添加固定在正文

的背景附件属性即可

background-attachment: fixed;

这是一个工作小提琴

https://jsfiddle.net/okouobeu/

使用'background-size：cover'更改高度时出现IE图像问题

2 个答案: