本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

在弹出模式后面通过 CSS 添加背景模糊

发布于2021-12-03 00:25     阅读(1119)     评论(0)     点赞(24)     收藏(1)


我希望在单击按钮时弹出的固定模式后面模糊整体 100% 背景。

我原以为它只是一个模糊过滤器,但它似乎只覆盖了屏幕的一小部分。我试过添加 100vh 的高度 + 宽度,并将位置设置为固定的 top: 0, left: 0 但元素没有居中。

要清楚 - 我希望模态后面的背景元素模糊,所以它后面的部分但焦点是模态。

这是 HTML(不确定有多大意义,但还是发布了):

<section class="blog-modal-section">
  <div class="blog-modal-container">
    <div class="blog-modal-content">
      <h2>My blogs</h2>
      <ul>
        <li>
          <a href="#">Blog 1 - Coming Soon</a>
        </li>
      </ul>
    </div>
  </div>
</section>

和当前的 CSS:

.blog-modal-section {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

.blog-modal-container {
  height: 40%;
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

这就是我迄今为止编码的全部内容 - 想在添加其余部分之前执行此操作。任何提示都会很棒。干杯!


解决方案


以下将制作一个屏幕填充元素,也增加了模糊。

.bg{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
}



所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/246455/8d855474b366fd6e3f78/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

24 0
收藏该文
已收藏

评论内容:(最多支持255个字符)