如何修复：完整的背景图像在IE中扭曲，但在使用background-size：cover时在chrome中工作正常

Question

请让我一直在与跨浏览器作斗争的CSS失真：

https://dim.crservicesplc.ng/

在Chrome中工作得很好，但在其他所有人中都会扭曲

铬 ：

IE，Edge，Firefox

协助表示赞赏

Answer 1

您可以删除“#home_main”div的margin-left属性，然后删除“.wrapper .wrapper-content”和“#page_wrapper”元素的填充，以将背景图像缩放到整个窗户的宽度。

希望这会有所帮助！

Answer 2

参考文献：

  

http://www.w3schools.com/graphics/svg_rect.asp   http://www.w3schools.com/graphics/svg_fegaussianblur.asp
  https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur

您可以控制来自stdDeviation="15"和<rect style="opacity: 0.5;" />的滤镜强度以及来自<rect style="fill: #333;>

的滤镜颜色

  

解决方案＃1

#home_main {
    margin: -30px;
    background-size: cover;
    padding: 0;
    background-image: url('https://dim.crservicesplc.ng/img/bg.jpg') !important;
/*            filter: blur(2px);*/
    overflow: hidden;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
}

body {
    overflow: hidden !important;
}

#home_content {
    font-size: 12pt;
    text-align: center;
    font-weight: 600;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: none;
    font-family: 'Open Sans' !important;
    filter: initial !important;
    box-shadow: initial !important;
}

    #home_content h1 {
        color: #fff !important;
        font-size: 42px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    #home_content p {
        color: #fff !important;
    }

<div id="home_main" style="height: 613px;">
    <svg id="mySVG" width="100%" height="100%" viewBox="0 0 1131 591">
        <filter id="blurMe">
            <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
        </filter>
      <rect filter="url(#blurMe)" width="1131" height="591" style="fill: #333; opacity: 0.5;  -ms-transform: scale(3, 3); -webkit-transform: scale(3, 3); 
transform: scale(3, 3); transform-origin: center;" />
    </svg>
</div>

  

解决方案＃2

#home_main {
    margin: -30px;
    background-size: cover;
    padding: 0;
    /*background-image: url('https://dim.crservicesplc.ng/img/bg.jpg') !important;*/
/*            filter: blur(2px);*/
    overflow: hidden;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.3);
}

body {
    overflow: hidden !important;
}

#home_content {
    font-size: 12pt;
    text-align: center;
    font-weight: 600;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: none;
    font-family: 'Open Sans' !important;
    filter: initial !important;
    box-shadow: initial !important;
}

#home_content h1 {
    color: #fff !important;
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 20px;
}

#home_content p {
    color: #fff !important;
}

<div id="home_main" style="height: 613px;">
    <svg id="mySVG" width="100%" height="100%" viewBox="0 0 1131 591">
        <filter id="blurMe">
            <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
        </filter>
        <image filter="url(#blurMe)" xlink:href="https://dim.crservicesplc.ng/img/bg.jpg" x="0" y="0" height="100%" width="100%"/>
    </svg>
</div>