没有 HTML 的图像淡入淡出 - 仅 CSS

Question

我需要有关网页设计作业的帮助。我们必须设计一个 Wordpress-Page 仅使用 CSS。我想要在 header 中使用 2 个图像进行交叉淡入淡出。

下面是我代码的重要部分。当然，因为有两个 background-images，所以它不会像这样工作。动画做好了，但是当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

当您的动画运行时，您会看到 "white hole"，因为您的两个背景图像都在您的 #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 中所做的那样）。

没有 HTML 的图像淡入淡出 - 仅 CSS

Image crossfading without HTML - ONLY CSS

css

wordpress

image

cross-fade