HTML없이 이미지 크로스 페이딩 - 전용 CSS

Question

Webdesign에 대한 숙제가 필요합니다. CSS 만 사용하여 Wordpress-Page를 디자인해야합니다. 헤더에 2 개의 이미지가있는 크로스 페이드를 원합니다.

아래 코드는 중요한 부분입니다. 물론 두 개의 배경 이미지 때문에 이런 식으로 작동하지 않습니다. 애니메이션은 준비되었지만 img가 사라지면 흰색 구멍 만 있습니다.

그래서 CSS에 2 개의 이미지를 넣을 수 있습니까? 도움을 주셔서 감사합니다. (그리고 나쁜 영어 죄송합니다 : 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을 편집하고 싶지 않으므로 : after 의사 요소를 사용하여 두 번째 이미지를 보유 할 별도의 요소로 사용할 수 있습니다. 이 두 이미지 이상에서는 작동하지 않습니다.

다음은 작동하는 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에서했던 것처럼).