Question

我正在尝试创建一个100％屏幕高度和25％宽度的模糊部分。

示例

enter image description here

到目前为止，这是我的代码。

CSS

body {
    background-image: url('autumn.jpg') no-repeat center 0px;
    background-size: cover;
    overflow: hidden;
}

#sidebar1 {
    max-width: 25%;
    background-image: url('autumn.jpg') no-repeat center 0px;
    background-size: cover;
    overflow: hidden;
}

HTML

<body>
    <main>
        <aside id="sidebar1">
            ...
        </aside>

现在，我已尝试使用此JavaScript库：Blur.js

这不是最佳解决方案，因为它不稳定并导致Chrome经常崩溃。我知道使用CSS3我可以使用filter: blur()属性。但是，我似乎无法获得完成此任务所需的标记/样式属性。基本上我需要侧边栏能够在屏幕尺寸变化时动态渲染模糊。 filter属性是否仅适用于<img>元素？我无法通过使用background-image属性将其应用于身体。

Answer 1

This thing I've made有一个使用CSS的模糊效果的示例。它应该适用于任何DOM元素，而不仅仅是图像。我的猜测是你需要一个-webkit-filter：blur（）（如果你用Chrome，Safari或Opera测试它）以及filter：blur（）。我认为你最好避免使用js库，我无法想象javascript中的图像处理效果特别好。

用于覆盖图像和css模糊的标记和样式

1 个答案: