让我的伪分区与我的常规分区大小相同

我正在尝试做我认为是简单的动画。我的下面的代码工作就像它应该，除了我的伪元素，#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

让我的伪分区与我的常规分区大小相同

回答

相关问题