Изображение кроссфейдинг без HTML - ТОЛЬКО CSS

Question

Мне нужна помощь с домашней работой для Webdesign. Мы должны создать Wordpress-страницу только с помощью CSS. Я хочу кроссфейдинг в заголовке с двумя изображениями.

Ниже важной части моего кода. Конечно, это не так, потому что два фоновых изображения. Анимация готова, но когда img исчезает, есть только белая дыра.

Так как я могу положить 2 изображения в CSS? ... Благодарим за помощь! (И простите за плохой английский: D)

#pageheader { 
background-image: url('img/test.jpg'); 
background-image: url('img/bg.jpg'); 
height: 500px; 
background-repeat: no-repeat; 
background-position: center center; 
background-size: 100% auto; 

left:0; 
-webkit-transition: opacity 1s ease-in-out; 
-moz-transition: opacity 1s ease-in-out; 
-o-transition: opacity 1s ease-in-out; 
transition: opacity 1s ease-in-out; 
} 

@keyframes pageheaderFadeInOut { 

0% { 
opacity:1; 
} 

45% { 
     opacity:1; 
    } 

55% { 
    opacity:0; 
    } 

100% { 
     opacity:0; 
    } 
} 

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

Answer 1

Вы видите, что «белая дыра», когда ваша анимация работает, потому что оба ваши фоновые изображения внутри #pageheader DIV, который ваша анимация делает прозрачной.

Поскольку вы не хотите редактировать свой HTML, мы можем использовать: после псевдоэлемента, чтобы действовать как отдельный элемент для хранения второго изображения. Обратите внимание, что это не будет работать более чем с этими двумя изображениями.

Работает jsfiddle.

CSS: 
#pageheader { 
    background-image: url('img/test.jpg'); 
    height: 500px; 
    width: 600px; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

#pageheader:after{ 
    content: ''; 
    display: block; 
    width: 100%; 
    height: 500px; 
    background-image: url('img/bg.jpg'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
    animation-name: pageheaderFadeInOut; 
    animation-timing-function: ease; 
    animation-iteration-count: infinite; 
    animation-duration: 10s; 
} 


@keyframes pageheaderFadeInOut { 
    0% {opacity:1;} 
    50% {opacity:0;} 
    100% {opacity:1;} 
} 

Обратите внимание, что вам нужно будет добавить префикс браузера (например, я сделал в jsfiddle).