关键帧动画上不需要的粘性背景图像

Question

我制作了一个简单的 css 关键帧动画，该动画会在页面加载时发生。但是，页面background-image 坚持文本。你可以在这里看到我的问题

https://codepen.io/gavdraws/pen/OmpEjK

任何想法我做错了什么？

干杯

Answer 1

您已将background-image 应用于.home，并且文本元素具有.home 类，因此每个元素都有background-image。

我认为您希望在包含文本元素 (.pageCont) 的元素上使用该背景 - 不是每个 .home 元素。

/* - - - - - Nav Icons - - - - - */

/* Profile */
$(document).ready(function(){
  $("#top").hover(function() {
     $("#profile").css("background-image", "url(img/nav-icons/Profile-light.png)");
  }, function() {
     $("#profile").css("background-image", "url(img/nav-icons/Profile-dark.png)");
  });
});

/* CV */
$(document).ready(function(){
  $("#left").hover(function() {
     $("#cv").css("background-image", "url(img/nav-icons/CV-light.png)");
  }, function() {
     $("#cv").css("background-image", "url(img/nav-icons/CV-dark.png)");
  });
});

/* Contact */
$(document).ready(function(){
  $("#bottom").hover(function() {
     $("#contact").css("background-image", "url(img/nav-icons/Contact-light.png)");
  }, function() {
     $("#contact").css("background-image", "url(img/nav-icons/Contact-dark.png)");
  });
});

/* Work */
$(document).ready(function(){
  $("#right").hover(function() {
     $("#work").css("background-image", "url(img/nav-icons/Work-light.png)");
  }, function() {
     $("#work").css("background-image", "url(img/nav-icons/Work-dark.png)");
  });
});

html, body { 
  height:100%; 
  width: 100%; 
  margin:0; 
  padding:0; 
}

h2{
  font-family: 'Lato', sans-serif;
  font-size: 33pt; 
  font-style: bold; 
  text-transform: uppercase;
}

h2.home{
  color: #EDEDED;
}

p{
  font-family: 'Lato', sans-serif;
  font-size: 12pt;
}

p.home{
  color: #EDEDED;
}

/*.preloader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    z-index: 2000;
    background-image: url(../gfx/logo/logo.gif) !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    }*/

    /*#line{
      position: relative;
      top: 50%;
      bottom: 50%;
    }*/

    .frame {
      position: absolute;
      z-index: 1000;
    }

    .frame.rightFrame {
      top: 0px;
      right: 0px;
      border-right: 45px solid #EDEDED;
      border-top: 45px solid transparent;
      border-bottom: 45px solid transparent;
      height: 100%;
      box-sizing: border-box;
    }

    .frame.rightFrame:hover{
     border-right: 45px solid #F1612F;
     cursor: pointer;
  }

.frame.leftFrame {
    top: 0px;
    left: 0px;
    border-left: 45px solid #EDEDED;
    border-top: 45px solid transparent;
    border-bottom: 45px solid transparent;
    height: 100%;
    box-sizing: border-box;
}

.frame.leftFrame:hover{
   border-left: 45px solid #F1612F;
   cursor: pointer;
}

 .frame.topFrame {
  top: 0px;
  left: 0px;
  border-top: 45px solid #EDEDED;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0px;
  width: 100%;
  box-sizing: border-box;
}

.frame.topFrame:hover{
 border-top: 45px solid #F1612F;
 cursor: pointer;
}

.frame.bottomFrame {
  bottom: 0px;
  left: 0px;
  border-bottom: 45px solid #EDEDED;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  height: 0px;
  width: 100%;
  box-sizing: border-box;
}

.frame.bottomFrame:hover{
 border-bottom: 45px solid #F1612F;
 cursor: pointer;
}

.pageCont{
  position: absolute;
  top: 45px;
  left: 45px;
  right: 45px;
  bottom: 45px; 
  z-index: 950;
  overflow: hidden;
}

/* - - - - - Icons formatting - - - - - */

.menuIcon {
  z-index: 1001;
  cursor: pointer;
}

/* Profile */
.menuIcon#profile {
  position: relative;
  margin: 0 auto; 
  width: 45px;
  height: 45px;
  background-image: url(../img/nav-icons/Profile-dark.png);
  background-repeat: no-repeat; 
}

#profile:hover ~ .topFrame {
  border-top: 45px solid #F1612F !important;
}

#profile:hover {
  background-image: url(../img/nav-icons/Profile-light.png) !important;
}

/* CV */
.menuIcon#cv {
  top: 50%; 
  margin-top: -15px; 
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url(../img/nav-icons/CV-dark.png);
  background-repeat: no-repeat; 
}

#cv:hover ~ .leftFrame {
  border-left: 45px solid #F1612F !important;
}

#cv:hover {
  background-image: url(../img/nav-icons/CV-light.png) !important;
}

/* Contact */
.menuIcon#contact {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  bottom: 0 !important;
  width: 45px;
  height: 45px;
  background-image: url(../img/nav-icons/Contact-dark.png);
  background-repeat: no-repeat; 
}

#contact:hover ~ .bottomFrame {
  border-bottom: 45px solid #F1612F !important;
}

#contact:hover {
  background-image: url(../img/nav-icons/Contact-light.png) !important;
}

/* Work */
.menuIcon#work {
  top: 50%; 
  right: 0; 
  margin-top: -15px; 
  position: absolute;
  width: 45px;
  height: 45px;
  background-image: url(../img/nav-icons/Work-dark.png);
  background-repeat: no-repeat; 
}

#work:hover ~ .rightFrame {
  border-right: 45px solid #F1612F !important;
}

#work:hover{
  background-image: url(../img/nav-icons/Work-light.png) !important;
}

.pageCont{
  background-image: url("http://www.codeandpepper.com/assets/gfx/start/slide_3.jpg") !important;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top left; 
}

.profile-pic{
  position: relative;
  margin-top: 30px !important; 
  width: 150px; 
  height: auto;
  text-align: center;
  animation: fadeuptwo 0.8s ease-out forwards;
  /* Safari and Chrome */
  -webkit-animation: fadeuptwo 0.8s;
}

.centre-div{
  text-align: center;
  position: relative; 
  margin: 0 auto !important; 
  margin-top: 50px !important; 
  width: 420px; 
  height: 80%; 
  animation: fadeup 0.9s ease-out forwards;
  /* Safari and Chrome */
  -webkit-animation: fadeup 0.9s;
}

@keyframes fadeup {
  from {
    top: 200px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1
  }
}

@-webkit-keyframes fadeup {
/* Safari and Chrome */
  from {
    top: 200px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}

@keyframes fadeuptwo {
  from {
    top: 200px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1
  }
}

@-webkit-keyframes fadeuptwo {
/* Safari and Chrome */
  from {
    top: 200px;
    opacity: 0;
  }
  to {
    top: 0px;
    opacity: 1;
  }
}



a {
  color: #F1612F;
  display: inline-block;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}
a:after {
  background-color: currentColor;
  bottom: 0;
  content: '';
  display: inline-block;
  height: 2.5px;
  left: 0;
  position: absolute;
  right: 0;
  -moz-transition: left 0.15s ease-out,right 0.15s ease-out;
  -o-transition: left 0.15s ease-out,right 0.15s ease-out;
  -webkit-transition: left 0.15s ease-out,right 0.15s ease-out;
  transition: left 0.15s ease-out,right 0.15s ease-out;
}
a:hover:after {
  left: 50%;
  right: 50%;
  -moz-transition: left 0.15s ease-in,right 0.15s ease-in;
  -o-transition: left 0.15s ease-in,right 0.15s ease-in;
  -webkit-transition: left 0.15s ease-in,right 0.15s ease-in;
  transition: left 0.15s ease-in,right 0.15s ease-in;
}

/* Responsive: Small Desktop */
@media (max-width: 640px) {

}

/* Responsive: Mobile */
@media (max-width: 640px) {
  .frame{
    display: none !important; 
  }

  .pageCont{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
  }

  .menuIcon{
    display: none !important;
  }

  .centre-div{
    width: 90%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
	<!--<div class="preloader"></div>-->

	<div class="menuIcon" id="profile"></div>
	<div class="menuIcon" id="cv"></div>
	<div class="menuIcon" id="work"></div>
	<div class="menuIcon" id="contact"></div>

	<div class="frame rightFrame" id="right"></div>
	<div class="frame leftFrame" id="left"></div>
	<div class="frame topFrame" id="top"></div>
	<div class="frame bottomFrame" id="bottom"></div>

	<div class="pageCont home">
	<div class="centre-div">
		<img class="profile-pic" src="img/me_1@2x.png">
		<h2 class="home">Hi, I'm Gavin.</h2>
		<p class="home">
		A graphic and UX designer with excellent communication and design skills with a proven record of delivering creative and innovative design solutions. Welcome to my online Portfolio. 
		</p>
		<p class="home">
		I have passion for both digital and print design, with a forward-thinking mentality and innovative spark. Please feel free to have a <a>look around</a> and <a>say hello</a>. 
		</p>
	</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="js/gavinfriel.js" type="text/javascript"></script>
</body>