Question

这是我目前正在制作的网站的HTML。

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="java.js"></script>



</head>

<body>

    <!-- Nav -->

  <header>


    <div id="header_wrap">
            <div id="header">
                <div class="nav">
                    <a href="javascript:void(0)">Work</a>
                    <a href="javascript:void(0)">About</a>
                    <a href="javascript:void(0)">Contact</a>
                </div>
                <div class="mobile_nav"></div>
                <div class="mobile_nav_menu">
                    <div class="mobile_menu">
                        <span>Work</span>
                        <span>About</span>
                        <span>Contact</span>
                    </div>
                    <div class="mobile_close">

                    </div>
                </div>
            </div>
        </div>


</header>



    <section class="logo">

        <div id="cf">
          <img class="bottom" src="img/logo-black.jpg" ; />
          <img class="bottom" src="img/logo-blue.jpg" ; />
          <img class="bottom" src="img/logo-red.jpg" ; />
          <img class="top" src="img/logo-green.jpg" ;/>

        </div>

    </section>

    <section class="about">

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



    </section>

  </body>

<footer>

</footer>

这是该网站的CSS。

/* This Resets All Styles */

* {
    margin: 0;
    padding: 0;
}
/*Navigation*/
#header_wrap {
    z-index: 2;
    width: 100%;
    height: 40px;
    position: fixed;
}
#header {
    max-width: 75%;
    min-width: 320px;
    margin: 0 auto;
    text-align: left;
    padding: 10px;
    font-size: 25px;
    line-height: 14px;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    color: #fff;
}
#header:after {
    clear: both;
    content: '';
    display: block;
}
#logo {
    float: left;
    font-size: 12px;
    font-weight: 100;
}
.nav {
    float: right;
    height: 40px;
    padding-top: 20px;
}
.nav a {
    display: block;
    float: left;
    margin-left: 20px;
    font-weight: 300;
    color: #fff;
    padding-bottom: 5px;
}
.nav a:hover {
    border-bottom: 1px solid #fff;
}
.mobile_nav {
    display: none;
    width: 24px;
    height: 24px;
    background: url(http://i.piccy.info/i9/c366d5ab31a3ca2f5b5f5110434b31a9/1399749144/965/744267/mobile_nav.png) no-repeat;
    float: right;
    cursor: pointer;
    margin-top: 2px;
}
.mobile_nav_menu {
    z-index: 3;
    width: 220px;
    height: 100%;
    position: fixed;
    padding: 11px 22px 0 0;
    top: 0;
    right: -270px;
    background: url(http://i.piccy.info/i9/90d5aef311fc1a9853cce72695cdfe36/1399749183/4243/744267/mobile_nav_bg.png) no-repeat;
}
.mobile_menu {
    float: right;
    font-weight: 400;
    font-style: normal;
    color: #656565;
    font-size: 15px;
    line-height: 32px;
    text-align: right;
    padding-bottom: 12px;
    width: 56px;
}
.mobile_menu span {
    cursor: pointer;
    color: #656565;
    padding-bottom: 2px;
}
.mobile_menu span:hover {
    transition: all .25s ease-in-out;
    border-bottom: 2px solid #fff;

}
.mobile_close {
    cursor: pointer;
    float: right;
    width: 24px;
    height: 24px;
    background: url(http://i.piccy.info/i9/88575af4eb3ecd766a58a62971d3631e/1399749221/1231/744267/x_close.png) no-repeat;
    background-size: 24px 24px;
    clear: right;
}
/*/Navigation*/
@media (max-width: 600px) and (min-width: 320px) {
    .nav {
        display: none;
    }
    .mobile_nav {
        display: block;
    }
}
@media (min-width: 601px) {
    .nav {
        display: block;
    }
    .mobile_nav {
        display: none;
    }
    .mobile_nav_menu {
        display: none;
    }
}


/*Image Fader*/

section {
    display: block;
    height:100%;
    width:100%;
    box-sizing:border-box;
}

#cf img {
  position:absolute;
  left:0;
    width:100%;
    height:auto;
  -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;
}

#cf img.top:hover {
  opacity:0;
}

@-webkit-keyframes
@keyframes cf4FadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#cf4a img:nth-of-type(1) {
  animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
  animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
  animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
  animation-delay: 0;
}


div, ul, li{
  margin: 0;
  padding: 0;
  list-style-type: none;
}


/*About section*/

.about{
  width:100%;
  margin:0 20;
}

.about p {
  left:0;
    width:100%;
    height:auto;
  -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;
}

我想我知道问题是什么，但没有解决它。好像我拿走它会打破其他部分。

#cf img {
  position:absolute;

这部分在这里。如果我采取行动，一切都是一个接一个。如果我瞄准那个div，我就无法理解为什么它会影响其余的部分。

还有其他问题，但这是我无法理解的主要问题。

谢谢，

扎克

编辑 -

这是与图片一起使用的javascript。

  /* image fader */

$(document).ready(function() {
  $("#cf_onclick").click(function() {
  $("#cf2 img.top").toggleClass("transparent");
});
});

我正在尝试与图像交叉淡入淡出。这样做会有更好的方法吗？

Answer 1

将#cf与具有相对位置的父div绑定

<section class="logo">
      <div id="cf_parent">   
        <div id="cf">
          <img class="bottom" src="img/logo-black.jpg" ; />
          <img class="bottom" src="img/logo-blue.jpg" ; />
          <img class="bottom" src="img/logo-red.jpg" ; />
          <img class="top" src="img/logo-green.jpg" ;/>
        </div>
      </div>
    </section>

将此添加到您的css

#cf_parent{
   position:relative;
}

部分彼此重叠

1 个答案: