Question

我的任务是创建具有给定背景图片的网站x。此外，在网站的一侧还存在一个div，当将其悬停在网站上方时，该动画会使另一个div从屏幕右侧移动。

问题是我想在div下的区域中使背景模糊。

经过研究和头脑风暴，我想出了以下方法：

我在body元素上绘制了背景。然后，当另一个父div悬停在上方时，我将移动一个div。接下来，在该div中，我有另一个div，该div具有固定的宽度，用于充当最后一个子对象的裁剪机制，该子对象具有相同的背景，但具有filter：blur（10px）属性。

这里是这样的：

<div class="draws-background">
    <div class="moves-child-when-hovered">
        <div class="overflow-hidden-to-crop-child">
            <div class="draws-blurred-background-with-fixed-position" />
        </div>
        <div class="some-content-that-needs-to-be-moved" />
    </div>
</div>

请注意以下几点：用作农作物的div随内容移动，因此底面看上去模糊。我确实做到了90％都能正常工作。模糊的背景起作用。

代码的问题在于，模糊的背景会与其他所有内容一起移动，因此效果实际上更像是模糊的背景在移动的一部分，而不是div滚动到模糊的背景上。

我正在尝试实现类似于MacOS中通知栏的效果。

我错误地解决了这个问题吗？或者有什么方法可以阻止模糊的背景与其父级一起移动？

制作一个模糊背景的div

0 个答案: