Question

我正在使用模糊过滤器编写响应式网页，以全屏模糊图像。这是一个很大的形象，我用它作为背景。关键是，我用它作为CSS背景的背景。例如。我不使用

<img src等。

我使用css属性background。这为我提供了使用background-size进行响应式布局的优势。例如。切断移动设备的边缘，并自动缩小，具体取决于风景和人像。

这将是一项很多工作，需要手工完成。

问题是，遗憾的是，IE。 Internet Explorer 11没有提供使用css模糊的方法。

编辑如评论中所述，我可以在photoshop中自己模糊图像并完成。问题是，对于较低的分辨率，我需要不同的模糊等级。如果屏幕尺寸为600x400，我无法使用与1920x1200相同的模糊效果。所以我必须模糊我使用的所有分辨率的所有背景图像。然后实现加载技术以仅加载所需的图像。有很多背景图片。总共约50。新客户也应该能够被客户添加。我真的不认为我让他做这个过程。

我读到了：

StackBlur

但我似乎无法让它发挥作用。

What I tried in a codepen so far

HTML

<canvas id="canv" ></canvas>

CSS

canvas {
  width: 100px;
  height: 100px;
            border: 10px #c0272b outset;
            box-shadow: 0px 0px 12px 2px #333;
            cursor: default !important;
  background: url('data:image/jpeg;base64,...') center center no-repeat;
        }

JS

 stackBlurCanvasRGB( "canv", 0, 0, 100, 100, 5 );

as a reference the codepen i stole the image from

CSS模糊IE 11的麻烦 - 解决方法？

0 个答案: