对单个 div 下的多个元素应用模糊？可以吗？

Question

我需要一些可以达到这种效果的东西：

enter image description here

我发现的最接近的是 blur.js 插件，但它仅将模糊应用于单个 div 的背景图像。

我想要一个固定位置的 div，在一堆其他 div 和图像甚至文本之上有一个 z 索引。当你滚动时，它们在它下面移动，而它一动不动，就像一块磨砂玻璃在它们上面。

我的幻想是否超出了可能的范围？ :)

Answer 1

对于您需要的下面的模糊效果，使用

rgba background-color

和

backdrop-filter

:

background-color: rgba(220, 220, 220, 0.3);
backdrop-filter: blur(5px);

为了使 div 固定并位于您需要的所有 div 上

position

和

z-index

:

position: fixed;
z-index: 10;

支持所有浏览器

完整代码在这里：

github模糊效果项目

您还可以在这些网站中看到滚动的模糊效果：

苹果网站

znucomputer网站

您只需使用 HTML 和 css 即可做到这一点：

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    background-image: url(./colory.avif);
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100vw;
}

div.text-conteiner {
    background-color: gray;
    width: 50%;
    margin: auto;
}

p.text {
    padding: 50px;
    text-align: justify;
}

div.blur-glass {
    height: 300px;
    width: 70%;
    position: fixed;
    top: 100px;
    right: 15%;
    background-color: rgba(220, 220, 220, 0.3);
    backdrop-filter: blur(5px);
    z-index: 10;
}

<body>
    <div class="text-conteiner">
        <p class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quod iusto explicabo earum impedit labore facere sunt? Non consectetur exercitationem cumque, eligendi dolores quos id! Eaque iusto beatae quidem! Illum atque officia, sed eos quo aperiam sit deserunt nesciunt adipisci ex laborum voluptatem, officiis doloribus qui optio odit. Illo non facere voluptas quasi debitis numquam cum voluptate commodi iusto nesciunt incidunt ea deserunt alias, cupiditate veritatis voluptatibus dolorum a qui nobis, eligendi molestias excepturi enim aut? Rem enim dolorem quasi sapiente illum illo fugit temporibus suscipit magni! Voluptate est, placeat ullam minus quas aspernatur eius nihil quibusdam temporibus accusantium. Officia atque autem saepe veniam consequatur cum magnam laborum. Eius sequi facilis quas consequatur, dolores maxime, assumenda illo, adipisci aut voluptatum dolorum saepe minus esse hic modi nemo earum corrupti recusandae repellat. Praesentium iure dolorem reiciendis earum deserunt eius tenetur culpa cupiditate officia asperiores suscipit sed quibusdam perspiciatis minima accusantium, nesciunt quaerat </p>
        <p class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quod iusto explicabo earum impedit labore facere sunt? Non consectetur exercitationem cumque, eligendi dolores quos id! Eaque iusto beatae quidem! Illum atque officia, sed eos quo aperiam sit deserunt nesciunt adipisci ex laborum voluptatem, officiis doloribus qui optio odit. Illo non facere voluptas quasi debitis numquam cum voluptate commodi iusto nesciunt incidunt ea deserunt alias, cupiditate veritatis voluptatibus dolorum a qui nobis, eligendi molestias excepturi enim aut? Rem enim dolorem quasi sapiente illum illo fugit temporibus suscipit magni! Voluptate est, placeat ullam minus quas aspernatur eius nihil quibusdam temporibus accusantium. Officia atque autem saepe veniam consequatur cum magnam laborum. Eius sequi facilis quas consequatur, dolores maxime, assumenda illo, adipisci aut voluptatum dolorum saepe minus esse hic modi nemo earum corrupti recusandae repellat. Praesentium iure dolorem reiciendis earum deserunt eius tenetur culpa cupiditate officia asperiores suscipit sed quibusdam perspiciatis minima accusantium, nesciunt quaerat </p>
        <p class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti quod iusto explicabo earum impedit labore facere sunt? Non consectetur exercitationem cumque, eligendi dolores quos id! Eaque iusto beatae quidem! Illum atque officia, sed eos quo aperiam sit deserunt nesciunt adipisci ex laborum voluptatem, officiis doloribus qui optio odit. Illo non facere voluptas quasi debitis numquam cum voluptate commodi iusto nesciunt incidunt ea deserunt alias, cupiditate veritatis voluptatibus dolorum a qui nobis, eligendi molestias excepturi enim aut? Rem enim dolorem quasi sapiente illum illo fugit temporibus suscipit magni! Voluptate est, placeat ullam minus quas aspernatur eius nihil quibusdam temporibus accusantium. Officia atque autem saepe veniam consequatur cum magnam laborum. Eius sequi facilis quas consequatur, dolores maxime, assumenda illo, adipisci aut voluptatum dolorum saepe minus esse hic modi nemo earum corrupti recusandae repellat. Praesentium iure dolorem reiciendis earum deserunt eius tenetur culpa cupiditate officia asperiores suscipit sed quibusdam perspiciatis minima accusantium, nesciunt quaerat </p>
    </div>
    <div class="blur-glass"></div>
</body>

对单个 div 下的多个元素应用模糊？可以吗？

问题描述投票：0回答：1

1个回答

最新问题

对单个 div 下的多个元素应用模糊？可以吗？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1