Question

我体内有一个背景渐变：

background: linear-gradient(270deg, #9a4dd9, #1c84ea, #D94279);
    background-size: 400% 400%;
    animation: AnimationName 30s ease infinite;

但是，当我将元素放在容器div中并居中时，它会使背景变白：

.my_container{
    background: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

有人知道这是什么原因吗？

body {
  margin: 0;
  background: linear-gradient(270deg, #9a4dd9, #1c84ea, #D94279);
  background-size: 400% 400%;
  -webkit-animation: AnimationName 30s ease infinite;
  -moz-animation: AnimationName 30s ease infinite;
  -o-animation: AnimationName 30s ease infinite;
  animation: AnimationName 30s ease infinite;
}

.my_container {
  background: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}


/* Scrolling gradient background */

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@-o-keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

@keyframes AnimationName {
  0% {
    background-position: 0% 50%
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta HTTP-EQUIV="EXPIRES" CONTENT="-1">
</head>
<body>

  <div class="my_container">
    stuff
  </div>
  
</body>
</html

居中div使背景渐变变为白色

0 个答案: