html - 我用 html 编写了一个自动背景幻灯片，但我网站上的 Logo 不断淡入图像，就好像它是幻灯片的一部分一样

这段代码是关于我稍后要放入的按钮以及它们的字体和位置的:

#titleBar p {
    font-family: "Arial";          
    font-size: 3em;
    float: left;
    width: 100%;
    display: inline-block;
    margin: 0;
    padding-left:10px;
}
 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: auto;
    display: inline-block;
    float: right;
    margin-top: -40px;
}

li {
    display: inline;
}

li a {
    display: inline;
    margin-right: 46px;
    color: black;
    font-family: "Arial";
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #ffffff;
}

.active {
    background-color: #99ff6;
}

* {
    padding: 0;
    margin: 0
}

body {
    background-color: #000000;
}

此代码是核心 CSS 样式:

.crossfade > figure {
    animation: imageAnimation 30s linear infinite 0s;
    backface-visibility: hidden;
    background-size: cover;
    background-position: center center;
    color: transparent;
    height: 100%;
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 0;
}

此代码将背景图像添加到幻灯片:

.crossfade > figure:nth-child(1) {
    background-image: url('tokyo.jpg');
}
.crossfade > figure:nth-child(2) {
    animation-delay: 6s;
    background-image: url('osaka.jpg');
}
.crossfade > figure:nth-child(3) {
    animation-delay: 12s;
    background-image: url('dubai.jpg');
}
.crossfade > figure:nth-child(4) {
    animation-delay: 18s;
    background-image: url('rome.jpg');
}
.crossfade > figure:nth-child(5) {
    animation-delay: 24s;
    background-image: url('paris.jpg');
}
.crossfade > figure:nth-child(6) {
    animation-delay: 30s;
    background-image: url('singapore.jpg');
}
.crossfade > figure:nth-child(7) {
    animation-delay: 36s;
    background-image: url('istanbul.jpg');
}

此代码使用 CSS3 动画创建交叉淡入淡出效果:

@keyframes imageAnimation {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
    }
    8% {
        animation-timing-function: ease-out;
        opacity: 1;
    }
    17% {
        opacity: 1
    }
    25% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

<html>
<head>
    <title>My Travels</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="An image crossfade animation done with CSS3">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

<div id="titleBar" style>
    <img src="travel.png" style="padding-top: 20px; padding-left: 60; padding-bottom: 15; height: 50; a href="Travel.html"">
</div>

此代码为背景幻灯片创建 HTML 结构:

<div class="crossfade">
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
</div>

</body>
</html>

最佳答案

只需使用 z-index将您的 Logo 移动到顶部，将图形移动到底部，如下所示:

#titleBar p {
  font-family: "Arial";
  font-size: 3em;
  float: left;
  width: 100%;
  display: inline-block;
  margin: 0;
  padding-left: 10px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: auto;
  display: inline-block;
  float: right;
  margin-top: -40px;
}

li {
  display: inline;
}

li a {
  display: inline;
  margin-right: 46px;
  color: black;
  font-family: "Arial";
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ffffff;
}

.crossfade > figure {
  animation: imageAnimation 30s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: -1;
}

.crossfade > figure:nth-child(1) {
  background-image: url('https://pbs.twimg.com/profile_images/434258933721489409/Hg0Z1blu.jpeg');
}

.crossfade > figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url('http://www.drodd.com/images15/2-22.png');
}

.crossfade > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url('http://www.freeiconspng.com/uploads/number-3-icon-17.png');
}

.crossfade > figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url('https://pbs.twimg.com/profile_images/708068901620486144/QO17QaY-.jpg');
}

.crossfade > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url('http://www.kidsmathgamesonline.com/images/pictures/numbers600/number5.jpg');
}

.crossfade > figure:nth-child(6) {
  animation-delay: 30s;
  background-image: url('https://pbs.twimg.com/profile_images/863084976476233729/iKoEcmWt.jpg');
}

.crossfade > figure:nth-child(7) {
  animation-delay: 36s;
  background-image: url('https://pbs.twimg.com/profile_images/613986789586542592/vDhMOvlR.jpg');
}

@keyframes imageAnimation {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
  }
  8% {
    animation-timing-function: ease-out;
    opacity: 1;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

<div id="titleBar" style>
  <a href="Travel.html"><img src="https://www.viva64.com/media/images/content/b/0482_PVS-Studio_Free_StackOverflow/image1_thm_blank_512x512.png" style="z-index: 20; padding-top: 20px; padding-left: 60; padding-bottom: 15; height: 50;" /></a>
</div>
<div class="crossfade">
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
  <figure></figure>
</div>

关于html - 我用 html 编写了一个自动背景幻灯片，但我网站上的 Logo 不断淡入图像，就好像它是幻灯片的一部分一样，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44872158/

html - 我用 html 编写了一个自动背景幻灯片，但我网站上的 Logo 不断淡入图像，就好像它是幻灯片的一部分一样

上一篇：css - 我怎样才能将我的导航 div 的高度设置为它包含标题 div 的高度的 100%？

下一篇：html - Css 时间轴文本对齐