Question

我的所有页面上都有一个带有类的div，有一些页面具有此类的自定义背景。在IE中，只有点击刷新后，背景的图像（png）部分才会加载。它似乎是从.content-banner提取原始背景，而不是覆盖。我该如何解决这个问题？

此外，我的确有媒体查询，它可以在桌面模式下以png上的线性渐变显示背景-在较小的屏幕中，它仅显示原始类bg。

它也不是一致的，所以它定义了一个奇怪的错误，有些页面的png图像显示的很好，而其他页面则没有。

。

content-banner {
  background: linear-gradient(135deg, rgba(3,68,105,1) 0%, rgba(39,130,186,1) 50%, rgba(4,118,179,1) 100%);
  color:#FFF;
  padding: 2rem 0;

 [data-page-type="homepage"] & {
  display: none;
 }

  .bodyPaForwardLanding  & {
   @include media-query($majorBreakpoint4)  {
     background:  linear-gradient(to right, rgba(35,79,119,1) 0%, rgba(61,129,186,1) 40%, rgba(60,127,184,0) 65%, rgba(60,127,184,0) 75%, rgba(57,120,180,1) 100%) repeat-y left top, url(../../images/marketing/pa-forward/banner-pa-forward.png) no-repeat right -30rem top;
     background-size: auto 100%;
   }
   @include media-query($majorBreakpoint5) {
     background:  linear-gradient(to right, rgba(35,79,119,1) 0%, rgba(61,129,186,1) 40%, rgba(60,127,184,0) 65%, rgba(60,127,184,0) 75%, rgba(57,120,180,1) 100%) repeat-y left top, url(../../images/marketing/pa-forward/banner-pa-forward.png) no-repeat right -10rem top;
     background-size: auto 100%;
   }
 }

 .bodyPaForwardUndergrad & {
    @include media-query($majorBreakpoint4) {
      background:  linear-gradient(to right, rgba(35,79,119,1) 0%, rgba(61,129,186,1) 40%, rgba(60,127,184,0) 65%, rgba(60,127,184,0) 78%, rgba(57,120,180,1) 100%) repeat-y left top, url(../../images/marketing/pa-forward/banner-undergrad.png) no-repeat right top;
    }
  }

 .bodyPaForwardGrad  & {
    @include media-query($majorBreakpoint4) {
      background:  linear-gradient(to right, rgba(35,79,119,1) 0%, rgba(61,129,186,1) 40%, rgba(60,127,184,0) 65%, rgba(60,127,184,0) 75%, rgba(57,120,180,1) 100%) repeat-y left top, url(../../images/marketing/pa-forward/banner-graduate.png) no-repeat right top;
    }
  }

 .bodyPaForwardParent & {
    @include media-query($majorBreakpoint4) {
      background:  linear-gradient(to right, rgba(35,79,119,1) 0%, rgba(61,129,186,1) 40%, rgba(60,127,184,0) 65%, rgba(60,127,184,0) 80%, rgba(57,120,180,1) 100%) repeat-y left top, url(../../images/marketing/pa-forward/banner-parent.png) no-repeat right top;
    }
  }
}

IE 11错误地渲染带有png的线性背景

0 个答案: