Question

我需要在此页面上显示四张不同的图片才能淡入淡出。我还添加了一个徽标，由于某种原因，徽标随着图片逐渐消失，虽然我不知道如何。我还想让导航栏填满页面的宽度。

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>

body {
    background-image: url("bg.jpg");
}
ul {
    list-style-type: none;

    padding: 0;
    overflow: hidden;
    background-color:  #000000;
    margin-left:100px;
}
li {
    float:left;
}
li a {
    display: block;
    color: white;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover {
    background-color:  #000000;
}
img {
    position: absolute;
   margin-top:10px;
    border: 1px solid #ccc;
}
img img {
    width: 100%;
    height: auto;
}
            img:nth-of-type(1){
                 -webkit-animation: fadeInOut 20s linear 20s infinite;
            }
            img:nth-of-type(2){
                 -webkit-animation: fadeInOut 20s linear 15s infinite;
            }
            img:nth-of-type(3){
                 -webkit-animation: fadeInOut 20s linear 10s infinite;
            }
            img:nth-of-type(4){
                 -webkit-animation: fadeInOut 20s linear 0s infinite;
            }

            @-webkit-keyframes fadeInOut{

            0% { opacity:1; } 
            17% { opacity:1; } 
            25% { opacity:0; } 
            92% { opacity:0; } 
            100% { opacity:1; }

            }
.image-wrapper {
  position: relative;
  height: 600px; // change to whatever works for you 
}
.image {
  position: absolute;
  top: 50%;
  border: 1px solid #ccc;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.container {
  width: 1000px;
}
.logo { 
  float: left; 
  width: 100px;
  height: 50px;
}
.nav { 
  float: right; 
  width: 880px;

}
</style>

<title>Badass Burgers</title>

</head>
<body>

<!--Top Navigation Links (top horizontal navigation bar)-->

  <img class="logo" src='logo.jpg'/>
<div class="container">
  <ul class="nav">

  <li><a class="active" href="info.php">About</a></li>
  <li><a href="about.php">Team</a></li>
  <li><a href="Menu.php">Menu</a></li>
  <li><a href="contact.php">Contact Us</a></li>
</ul>
  <div style="clear: both"></div>
</div>
 <div class="image-wrapper">
    <img class="image" src='food1.jpg' width="1400" height="600" />
    <img class="image" src='Food2.jpg' width="1400" height="600" />
    <img class="image" src='Food3.jpg' width="1400" height="600" />
    <img class="image" src='Food4.jpg' width="1400" height="600" />
</div>
</body>
</html>

Answer 1

img:nth-of-type(1){是第一张图片。第一个图像是徽标。因此要么开始编号为2，要么（更好），使选择器更具体，例如：

.image-wrapper img:nth-of-type(1){

当然，其他人也一样。

所有图像都在褪色

1 个答案: