如何修复：完整背景图像在 IE 中扭曲，但在 chrome 中使用背景大小时工作正常：覆盖

Question

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

https://dim.crservicesplc.ng/

在 chrome 中工作正常，但在所有其他方面都失真

chrome:

IE、Edge、Firefox

感谢帮助

Answer 1

您可以删除“#home_main”div的左边距属性，然后删除“.wrapper .wrapper-content”和“ #page_wrapper" 元素，将背景图像缩放到 window 的整个宽度。

希望这会有所帮助！

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;>

的滤镜颜色

Solution #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>

Solution #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>

如何修复：完整背景图像在 IE 中扭曲，但在 chrome 中使用背景大小时工作正常：覆盖

How to fix: Full background image distorts in IE but works fine in chrome when using background-size: cover

css

internet-explorer

svg

distortion