如何修复：完全背景图像扭曲在IE，但工作正常chrome时使用background-size：cover [英] How to fix: Full background image distorts in IE but works fine in chrome when using background-size: cover

问题描述

请让这个CSS扭曲我一直在与交叉浏览器打斗：

IE，Edge，Firefox

协助赞赏

解决方案

参考资料：

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

解决方案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_mainstyle = height：613px;> < svg id =mySVGwidth =100％height =100％viewBox =0 0 1131 591> < filter id =blurMe> < feGaussianBlur in =SourceGraphicstdDeviation =15/> < / filter> < rect filter =url（#blurMe）width =1131height =591style =fill：＃333; opacity：0.5; -ms-transform：scale（3,3）; -webkit- ：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％;左：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_mainstyle =height：613px;> < svg id =mySVGwidth =100％height =100％viewBox =0 0 1131 591> < filter id =blurMe> < feGaussianBlur in =SourceGraphicstdDeviation =2/> < / filter> < image filter =url（#blurMe）xlink：href =https://dim.crservicesplc.ng/img/bg.jpgx =0y =0height =100％width =100％/> < / svg>< / div>  

Please have this CSS distortion I have been battling with cross browser:

https://dim.crservicesplc.ng/

Works fine in chrome but distorts in all others

chrome:

IE, Edge, Firefox

Assistance appreciated

解决方案

References:

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

You could control intensity of filter from stdDeviation="15" and <rect style="opacity: 0.5;" /> and color of filter from <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时使用background-size：cover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！