Div фоновый цвет не отображается?

Question

Так что я нашел хороший codepen и начал играть с ним:

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

Проблема заключается в том, что я не могу показаться, чтобы сделать черный background-color моего div появляются так, что светящиеся остается позади div и не на нем.

Моя текущая ситуация:

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

z-index из дочернего элемента всегда будет выше, чем z-index его родителей, несмотря на то, что вы установили в CSS.

Псевдоэлемент :before перед псевдоэлементом 10.

Answer 3

Просто используйте один DIV для эффекта, а другой для черного ящика

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