讓我的僞分區與我的常規分區大小相同

我正在嘗試做我認爲是簡單的動畫。我的下面的代碼工作就像它應該，除了我的僞元素，#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; 
}

來源

2016-12-29 lolikols

你是什麼意思時，你說「不一樣」？我們無法看到這些圖像，所以如果您設置了快速jsfiddle並使用其他圖像，我們可以幫助您將這一切都弄清楚。 –

沒有「僞div」這樣的東西，而ID爲'div'的元素的CSS和':: after'創建的僞元素是不同的，所以我不確定他們爲什麼看起來相同。 –

添加小提琴。 – lolikols

這裏你的塊的行爲是相同的。您的圖像將適合不同取決於屏幕寬度，也#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>

來源

2016-12-29 22:00:37 godblessstrawberry

已更新的答案，現在它有一套共同的背景位置規則 - 我建議你把它保留在那裏，兩個塊在一個地方 – godblessstrawberry

哦，我的天啊親切！謝謝，它的工作原理！你是魔術師！標記爲答案。 – lolikols

讓我的僞分區與我的常規分區大小相同

回答

相關問題