Divの背景色が表示されませんか？

Question

だから私は素敵なcodepenを発見し、それで遊んで開始しました：

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

問題は、私は私のdivの黒background-colorがdiv BEHINDように輝く滞在見えるように見えることはできませんということで、それのontopではありません。

私の現在の状況：

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はいつもあなたがCSSで設定したものにもかかわらず、その親のz-indexよりも高くなります。

ただし、:after疑似要素の前には、:before疑似要素を使用できます。

Answer 3

ちょうどブラックボックス

のために1つの効果のためのdivと別のものを使用します

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