IE에서 작동하지 않는 배경 흐림 브라우저

그래서 CSS3를 기반으로하는 웹 사이트를 개발하고 있습니다. 다음은 배경을 흐리게 만드는 코드의 일부입니다.IE에서 작동하지 않는 배경 흐림 브라우저

.blur { 
      -webkit-filter: blur(5px); 
      -moz-filter: blur(5px); 
      -o-filter: blur(5px); 
      -ms-filter: blur(5px); 
      filter: blur(5px); 
      filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); 
     }

나는 흐림 필터를 지원하지 않는다는 것을 알고 있습니다. 나는이 문제를 해결하기 위해 SVG를 사용해야한다는 기사를 검색한다. 하지만 어쨌든 내 웹 사이트는 시나리오를 사용하고 있는데 인터넷을 탐색 할 때 URL에 액세스 할 수 없다는 의미입니다. SVG를 사용하지 않고이 문제를 해결할 수 있습니까?

출처

2016-08-31 Pwan

가능한 중복을 당신의 서버에 넣어 다른 이미지를 만들고, 그냥 흐리게 포토샵을 사용하고 전환하는 것 +] (http://stackoverflow.com/questions/19969853/blur-filter-for-ie-10) –

또한 http://stackoverflow.com/questions/18424647/css-blur-filter-not-working- in-firefox-and-ie-10-any-alternatives, http://stackoverflow.com/questions/15803122/filter-blur1px-doesnt-work-in-firefox-ie-and-opera, http : // stackoverflow. co.kr/questions/25850100/css-blur-in-ie-11 –

예. 하지만 내 시나리오에서는 내 문제를 해결하기 위해 svg를 사용하는 것이 적합하지 않습니다. – Pwan

내가 생각할 수있는 한 가지 방법은 기본적으로 배경 컨테이너를 복제하고 불투명도를 변경하고 이미지를 약간 흐리게 처리하여 흐림을 줄이는 것입니다. 당신이 가지고있는 또 다른 옵션은 IE 10의 사진을 [흐림 필터의

img:first-child { 
 
    opacity: 1; 
 
} 
 
img { 
 
    opacity: 0.2; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 
img:nth-child(2) { 
 
    left: 1px; 
 
} 
 
img:nth-child(3) { 
 
    left: 2px; 
 
} 
 
img:nth-child(4) { 
 
    left: 3px; 
 
} 
 
img:nth-child(5) { 
 
    left: 4px; 
 
}

<img src="https://placekitten.com/600/600"/> 
 
<img src="https://placekitten.com/600/600"/> 
 
<img src="https://placekitten.com/600/600"/> 
 
<img src="https://placekitten.com/600/600"/> 
 
<img src="https://placekitten.com/600/600"/>

출처

2016-08-31 02:40:09 Adjit

IE에서 작동하지 않는 배경 흐림 브라우저

답변

관련 문제