Html 景深效应？

只是尝试创建一个模式，缩放和模糊背景回来。基于hakim的avgrund

现在，在codingforums的@deathshadow的帮助下，它也有了嵌套模态

以下是当前状态：

🗙；
模式1

🗙；

标题图像1

🗙；

Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、sem。

🗙；

标题图像1

🗙；

标题图像2

🗙；

模式3

🗙；

标题图像1

景深测试


模式1


模式2


模式3

实现这一点的方法是结合使用

过滤器：模糊（3px）

和

转换：比例（0.8）

css属性

您可以看到我刚刚创建的小提琴的工作示例：

const container=document.getElementById（'container'）；
const background=document.getElementById（'background'）；
const foreground=document.getElementById（'foreground'）；
让我们看得见=假；
container.addEventListener（'click'，toggleModal）；
函数toggleModal（）{
如果（可见）{
hideModal（）；
可见=假；
}否则{
showModal（）；
modalIsVisible=true；
}
}
函数showmodel（）{
background.classList.add（'blur'）；
前台.classList.remove（'hidden'）；
}
函数hideModal（）{
background.classList.remove（'blur'）；
前台.classList.add（'hidden'）；
}

*{
框大小：边框框；
}
#容器{
位置：相对位置；
宽度：500px；
高度：500px；
}
#容器>分区{
位置：绝对位置；
宽度：100%；
身高：100%；
填充：30px；
线高：2米；
过渡：0.5s；
}
#背景{
z指数：1；
背景色：#ccc；
}
#前景{
z指数：2；
}
.隐藏{
不透明度：0；
}
.模糊{
过滤器：模糊（3px）；
变换：比例（0.8）；
}

对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。最重要的一点是，在劳动和就业领域，所有人都有自己的权利、义务和义务。但是最低限度的成本，是否需要在实验室中进行实际操作，是否需要从消费品中获得流动性？你是否应该在一个自由的世界里为自己的利益辩护？你是否应该在一个自由的世界里为自己的利益辩护？
我现在看得见了！

我非常喜欢第一次尝试的功能，因为我可以做很多模态，嵌套在两个级别上工作。只需使用模糊/缩放属性即可！难道你不能像我在示例中所做的那样，将它们添加到你想用javascript动态淡出的元素中吗？同样，cssI不认为这个问题只能用CSS来解决。我可能是错的，但为什么不使用几行javascript，而是过于复杂呢？没必要对自己如此挑剔。另外，我注意到您有一些html

id

标记，它们的值中有perdiods（id=“toggle\u modal1.1”）。当心，因为这可能会导致一些错误，当你是。