私の擬似divを私の通常のdivと同じサイズにする

Question

私は単純なアニメーションであると思ったことをしようとしています。 私の疑似要素を除いて、以下のコードは正常に動作しますが、#divは私の通常の要素と同じではありません。誰が何が起こっているか考えているのですか？

#div { 
    position:absolute; 
    right: 0; 
    left: 0; 
    height:280px !important; 
    width: 100vw; 
    left: 50%; 
    transform: translateX(-50%); 
    background-image: url('imageurl.com'); 
    background-position: center; 
} 

#div::after { 
    content: ' '; 
    display: block; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    background-image: url('imgurl2.com'); 
    background-repeat: no-repeat; 
    background-position: 50% 0; 
    background-size: cover; 
} 

ここで私はこれに使用していたアニメーションコードを持っています。

@keyframes FadeInOut 
{ 
    0% { opacity:1; } 
    45% { opacity:1; } 
    55% { opacity:0; } 
    100% { opacity:0; } 
} 

#div::after 
{ 
    animation-name: FadeInOut; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-duration: 10s; 
    animation-direction: alternate; 
} 

Answer 1

ここでブロックは同じように動作します。あなたのイメージは、あなたが「同じではない」と言うとき、あなたは何を意味する#divの高さは、画像サイズ

#div h1 a { 
 
    line-height: 0 !important; 
 
    font-size: 0 !important; 
 
    color: transparent !important; 
 
} 
 
#div, 
 
#div:after { 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
#div { 
 
    position: absolute; 
 
    right: 0; 
 
    left: 0; 
 
    height: 250px !important; 
 
    width: 100vw; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    background-image: url('http://imgur.com/oGlAyuz.jpg'); 
 
} 
 
#div:after { 
 
    content: ' '; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
    background-image: url('http://imgur.com/DvyC04K.jpg'); 
 
} 
 
@keyframes FadeInOut { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    45% { 
 
    opacity: 1; 
 
    } 
 
    55% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 
#div::after { 
 
    animation-name: FadeInOut; 
 
    animation-timing-function: ease-in-out; 
 
    animation-iteration-count: infinite; 
 
    animation-duration: 10s; 
 
    animation-direction: alternate; 
 
}

<div id="div"> 
 
    <h1 style="text-decoration: none;" class="HF tk-pragmatica-web"> 
 
    <span class="tk-pragmatica-web" style="font-weight: 200; text-shadow: -1px -1px 0px rgba(65,145,197,1.5), 1px 1px 0px rgba(255,255,255,0.2);"> 
 
     <a id="ctl00_HpHome" href="Default.aspx" style="color:White;text-decoration:none;">Brian Kim Test</a> 
 
    </span> 
 
    </h1> 
 
</div>