Question

构建一个WordPress主题并尝试在body标签上交叉淡化多个背景图像，而不是在div上！我一直在尝试使用本教程：http://css3.bradshawenterprises.com/cfimg/ |演示3 没有成功

是否可以不使用javascript和jquery，只使用css！目前我的Body css看起来像这样....

body {
    font-family: 'Arial', courier, sans-serif;
    background:url('ASSETS/bg2.jpg')no-repeat top left;
    background-size:cover;
    background-attachment:fixed
}

我的ASSETS文件夹中有另一个图像要交叉淡入淡出，名为bg.jpg。

Answer 1

您可以使用keyframe动画。类似的东西：

＆＃13;

body{
  height:100%;
  background:red;
  -webkit-animation: 9s fadeThis infinite;
  animation: 9s fadeThis infinite;
  }

@-webkit-keyframes fadeThis{
  0%{background:url(http://lorempixel.com/1000/900/);}
  50%{background:url(http://lorempixel.com/900/900/);}
  100%{background:url(http://lorempixel.com/1000/900/);}
  }
@keyframes fadeThis{
  0%{background:url(http://lorempixel.com/1000/900/);}
  50%{background:url(http://lorempixel.com/900/900/);}
  100%{background:url(http://lorempixel.com/1000/900/);}
  }

＆＃13;

应该为你褪色。

有关前缀要求的更多信息，请参阅caniuse。

Answer 2

这是我最终做的事情！我上面提到的那个教程最初仍然没有用，所以我稍微调整了一下......

CSS

body {
    font-family: 'Arial', courier, sans-serif;
    background:url('ASSETS/bg.jpg')no-repeat top left;
    background-size:cover;
    background-attachment:fixed;
}

然后......

#cf {
    position:absolute;
    height:100%;
    width:100%;
}
#cf img {
    position:fixed;
    background-size:cover;
    background-attachment:fixed;
    top:0; 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 cfFadeInOut {
    0% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    55% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
#cf > .top {
    animation-name:cfFadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-direction: alternate;
}

HTML

<div id="cf">
<img class="top" src="<?php echo get_template_directory_uri(); ?>/ASSETS/bg2.jpg">
</div>

对于那些像我一样开发WordPress主题的人，我在头文件中的正文标记之后添加了开头的CF div，当然在结束之前关闭正文标记在页脚中！

然后我在标题，菜单和内容元素上使用z-index，因此crossfade div始终是背景！此外，css可能需要针对移动设备和平板电脑设备进行调整。

身体上的交叉淡化图像

2 个答案: