Question

当我的网站上有一个元素处于活动状态时，我正在将一个类应用于正文。我想淡出剩下的内容非常像一个模态，但是我想淡出背景叠加，到目前为止我还没有成功。

.booking-open{
  transition:background-color 2s ease;
}

.booking-open:before{
  position:fixed;
  left:0;right:0;top:0;bottom:0;
  content:"";
  z-index: 1;
  background-color:rgba(0,0,0,.5); 

}

<body class="booking-open">
Demo
</body>

我几乎尝试了所有场景，但到目前为止还不是正确的场景。我究竟做错了什么？

Answer 1

你可以使用这样的CSS3动画：

@keyframes example {
    from {background-color: inherit;}
    to {background-color: rgba(0,0,0,.5);}
}

.booking-open:before{
  position:fixed;
  left:0;right:0;top:0;bottom:0;
  content:"";
  z-index: 1;
  background-color:rgba(0,0,0,.5); 
  animation-name: example;
  animation-duration: 4s;
}

示例：https://fiddle.jshell.net/193w5pyz/1/

转换：之前（背景色）

1 个答案: