Question

所以，我正在开发一个基于CSS3的网站。以下是尝试使背景模糊的代码的一部分。

.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');
        }

我知道IE不支持模糊过滤器。我搜索文章，他们说我必须使用SVG来解决这个问题。但不知何故，我的网站使用的情况是没有互联网，这意味着我无法在浏览时访问任何网址。无论如何不使用SVG来解决这个问题？

Answer 1

我能想到的一种方法基本上就是复制背景容器并改变不透明度并略微移动图像以给自己一个模糊。你有另一个选择就是创建另一个图像放在你的服务器上，只需用photoshop模糊它然后切换图片

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

背景模糊无法在IE浏览器中工作

1 个答案: