Question

所以我找到了一个很好的codepen并开始玩它：

http://codepen.io/georgehastings/full/xgwxgo

问题在于我似乎无法使background-color的黑色div出现，以便发光保持在div之后而不是它的顶部。< / p>

我目前的情况：

http://codepen.io/anon/pen/xgavRb

我做错了什么？

我正在寻找类似的效果：

http://assets.razerzone.com/eeimages/products/25594/firefly-cloth-tech-bg.jpg

Answer 1

您需要使用其他元素而不是:after，请将此视为示例：

body {
  background: black;
}
.homeTitle {
  z-index: 14;
  position: relative;
  text-align: center;
  color: #252B37;
  background-color: black;
  color: white;
  font-size: 50px;
  margin-top: 20vh;
  width: 100px;
  margin-bottom: 7vh;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: gamers;
  border-radius: 20px;
  /*  animation: textColor 10s ease infinite;*/
}
.homeTitleBack {
  position: absolute;
  content: "";
  left: 40%;
  top: 17px;
  z-index: -1;
  height: 47%;
  width: 20%;
  margin: auto;
  transform: scale(0.75);
  -webkit-filter: blur(5vw);
  -moz-filter: blur(5vw);
  -ms-filter: blur(5vw);
  filter: blur(5vw);
  background-size: 200% 200%;
  animation: animateGlowing 10s ease infinite;
}
@keyframes animateGlowing {
  0% {
    background: #FF0000;
  }
  33% {
    background: #7e0fff;
  }
  66% {
    background: #0053FF;
  }
  100% {
    background: #FF0000;
  }
}
@keyframes textColor {
  0% {
    color: #7e0fff;
  }
  50% {
    color: #0fffc1;
  }
  100% {
    color: #7e0fff;
  }
}

<div class="homeTitleBack"></div>
<div class="homeTitle">Test</div>

Answer 2

除非您在CSS中设置，否则子元素的

z-index将始终高于其父元素的z-index。

但是，您可以在:before伪元素前面使用:after伪元素。

Answer 3

只需使用一个div作为效果，另一个使用黑盒

<div class ="homeTitle">
  <div style="background: black">Test</div>
</div>

Div背景颜色没有显示出来？

3 个答案: