时间戳

首页 > 解决方案 > 打开盒子的背景模糊

javascript - 打开盒子的背景模糊

问题描述

我正在尝试创建一个在页面中心打开的 div，并且还模糊了 div 后面的所有内容。它不应该模糊 div 的内容。

这个问题的大多数答案是使用背景图像的建议。

背景不应该是图像，而是在打开 div 的那一刻背后的任何东西。是否没有模糊基础内容的属性或if我可以使用的语句？

标签： javascripthtmlcss

解决方案

您正在寻找的是用除您的模式之外的所有其他内容包装页面内容，并从我的附加代码中添加类 .blur 。

模态不应该是可模糊内容的子项，因此，当您打开模态并添加模糊时，您会达到预期的效果

.blur {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  padding: 40px;
  background: rgba(0,0,0,0.4);
  filter: blur(5px);
}

.myModal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 150px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: beige;
}
<body>
  <div class="blur">
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor congue enim a mattis. Etiam cursus a nisi quis feugiat. Duis pellentesque pharetra neque, at euismod augue bibendum vel. Mauris ornare mi placerat sapien facilisis dictum. Nam varius metus quis ultrices ultrices. Quisque gravida rhoncus turpis in viverra. Etiam sit amet orci malesuada magna vehicula interdum. Sed tellus ante, facilisis vel purus vitae, sodales mollis justo. Nullam vel libero sed diam luctus auctor ut ultricies tortor. Fusce porttitor volutpat venenatis. Curabitur a blandit erat. Duis mattis ornare nisl. Donec vestibulum quam sed consequat mollis. In eget aliquet metus. Sed imperdiet eros sit amet ullamcorper malesuada.
</p><p>
Fusce euismod sem a erat molestie, non mattis lorem dapibus. Donec tincidunt odio nec eleifend accumsan. Vestibulum quis justo sit amet lacus vehicula finibus nec in massa. Quisque ut luctus lacus. Proin eu elit laoreet, egestas neque at, tempus magna. Sed ac felis lacinia, luctus est at, iaculis mauris. Donec sit amet luctus lectus, nec cursus felis. Pellentesque pretium augue dui, tempor convallis dui placerat id. Donec vitae ex erat. Suspendisse non tincidunt ante. Vestibulum a risus vitae tortor vulputate placerat. Pellentesque pharetra bibendum lacus, in euismod dolor tempus eget. Donec imperdiet nisi sit amet mauris scelerisque laoreet. Pellentesque aliquet venenatis interdum. Aenean in augue diam.
</p><p>
Nullam tempus nec arcu vitae rutrum. Vivamus ipsum felis, finibus sit amet mauris ac, tempus dictum mi. Integer sollicitudin sollicitudin interdum. Nam semper sit amet felis eu viverra. Proin condimentum ante risus, at hendrerit urna elementum ac. Curabitur elementum, erat et sodales lobortis, dui tellus molestie urna, a molestie elit lorem at arcu. Ut nulla dui, vulputate ac ipsum sit amet, dignissim fringilla velit. Donec dignissim pretium dignissim. Nulla pulvinar faucibus velit. Ut commodo maximus velit, a hendrerit leo eleifend eget. Donec sed vestibulum diam, quis rhoncus tellus. Nunc nec congue orci, non semper nibh. Vivamus nec lorem lorem. Donec interdum egestas magna, non imperdiet nibh placerat ut.
</p><p>
Donec lacinia pretium imperdiet. Sed elementum pulvinar maximus. Nullam tempor mattis dapibus. Maecenas vitae erat lobortis, luctus est vel, finibus enim. Pellentesque varius feugiat volutpat. Ut sit amet consectetur elit, at mollis leo. Aenean et commodo libero. Curabitur ac elit lorem. Cras eget quam pretium, porta nisi at, sollicitudin est. Donec in mi vitae urna dignissim hendrerit. Mauris euismod nibh et risus blandit blandit. Suspendisse vitae varius nisi. Vestibulum sem lorem, dictum in ultricies ac, tincidunt eu ex. Fusce sed iaculis mi. Sed eu enim convallis, interdum est eu, mattis risus.
</p><p>
Morbi eget quam feugiat, porta ante ac, maximus mauris. Quisque iaculis risus urna, ut suscipit ipsum consequat sed. Nunc convallis vitae nulla non tempus. Praesent placerat velit a odio facilisis lacinia. Maecenas et auctor nunc. Ut eu libero eget lacus sollicitudin porttitor ac in velit. Nunc luctus vestibulum dignissim. Sed tristique est quis mi tempus dictum.
</p>

</div>
  
<div class="myModal">
  Morbi eget quam feugiat, porta ante ac, maximus mauris. Quisque iaculis risus urna, ut suscipit ipsum consequat sed. Nunc convallis vitae nulla non tempus. Praesent placerat velit a odio facilisis lacinia. Maecenas et auctor nunc. Ut eu libero eget lacus sollicitudin porttitor ac in velit. Nunc luctus vestibulum dignissim. Sed tristique est quis mi tempus dictum.
  </div>
</body>

或者也可以在 CodePen 上看到https://codepen.io/ClayC90/pen/KexqLG

推荐阅读