背景图像与另一个div重叠

Question

当视图变得更高或更宽时，我试图阻止.background图像的重叠技能div。我尝试了许多不同的事情，但我没有运气。请帮帮我!我对这件事相当陌生，所以请不要惊讶，如果我所做的一些简单的愚蠢的事情导致了这个问题。谢谢!

​

$(document).ready(function(){

//MENU
    $('.menu-icon').click(function(){
       $('.menu-nav').animate({
            height: 'toggle'
          }, 200
       );
  });


//SKILLS
  flagScroll = true;
  $(window).scroll(function() {
    if ($(this).scrollTop() > 40 && flagScroll) {
        // apply effects and animations
        flagScroll= false;
            $('.html').animate({
              marginRight: 0,
              width: 100
            }, 2200
          );

          $('.css').animate({
            marginRight: 0,
            width: 90
          }, 2200
        );

        $('.javascript').animate({
          marginRight: 0,
          width: 40
        }, 2200
      );
    }
});

});

/*$mat-black: #37474F;*/
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  /*background:transparent;*/
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

* h1 {
  font-family: 'Open Sans', sans-serif;
  font-weight: lighter;
}

header {
  background-color: black;
  height: 420px;
}

header .background {
  opacity: 0.2;
  background-image: url(http://lorempixel.com/400/200/sports/1);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 74%;
  position: absolute;
  overflow: hidden;
}

header nav {
  width: 100%;
  z-index: 2;
}

header .menu-icon {
  padding: 5px 0 5px 10px;
  cursor: pointer;
  width: 50px;
}

header .menu-icon img {
  width: 50px;
  height: 50px;
}

header .menu {
  width: 100%;
  border-top: solid #18FFFF 1px;
  border-width: 70%;
  height: 0;
}

header .menu:before {
  content: " ";
  display: block;
  width: 90%;
  height: 5px;
  margin: 0 auto;
  left: 0;
  right: 0;
  background-color: #18FFFF;
  opacity: 1;
}

header .menu .menu-nav {
  z-index: 2;
  position: absolute;
  background-color: #18FFFF;
  width: 90%;
  margin: 0 auto;
  left: 0;
  right: 0;
  border-bottom-radius: 5px;
  display: none;
}

header .menu .menu-nav ul {
  margin-top: 20px;
}

header .menu .menu-nav ul li {
  text-align: center;
  padding: 10px;
  list-style: none;
  border-radius: 5x;
  font-size: 2em;
  cursor: pointer;
}

header .menu .menu-nav ul li:hover {
  /*background-color: #607D8B;*/
  background-color: black;
  color: #18FFFF;
}

header .menu h1 {
  text-align: center;
}

header .menu .menu-social {
  width: 155px;
  margin: 30px auto;
}

header .menu .menu-social img {
  cursor: pointer;
  margin: 0 1px 0 1px;
  float: left;
  padding-top: 20px;
  padding-bottom: 20px;
}

header .menu .menu-social img:hover {
  position: relative;
  top: -5px;
}

header .bio {
  width: 70%;
  margin: 0 auto;
  margin-bottom: 0;
  position: relative;
}

header .bio .hello h1 {
  font-size: 3.4em;
  color: #18FFFF;
  text-align: center;
  padding-bottom: 20px;
  padding-top: 45px;
  font-family: 'Bowlby One SC', cursive;
}

header .bio .desc p {
  color: white;
  text-align: center;
  line-height: 25px;
  padding-bottom: 80px;
}

header img {
  display: block;
  margin: 0 auto;
  padding-bottom: 3px;
  cursor: pointer;
  position: relative;
}

.skills-2 {
  width: 90%;
  margin: 15px auto;
  background-color: white;
  overflow: hidden;
  border: solid black 1px;
  border-radius: 5px;
}

.skills-2 h1 {
  text-align: center;
  font-size: 3em;
  color: black;
  padding-top: 20px;
  padding-bottom: 20px;
}

.skills-2 .my-skills {
  width: 50%;
  padding-top: 20px;
  float: left;
  padding-bottom: 20px;
}

.skills-2 .my-skills ul li {
  text-align: center;
  padding-bottom: 10px;
}

.skills-2 .graph {
  float: left;
  width: 50%;
  padding-top: 20px;
}

.skills-2 .graph .html {
  width: 1px;
}

.skills-2 .graph .css {
  width: 1px;
}

.skills-2 .graph .javascript {
  width: 1px;
}

.skills-2 .graph .bar {
  height: 10px;
  background-color: #2962FF;
  margin-bottom: 18px;
}

.work {
  width: 100%;
  background-color: white;
  color: black;
}

.work:before {
  /*@include divider;*/
}

.work h1 {
  text-align: center;
  font-size: 3em;
  padding-top: 40px;
  padding-bottom: 20px;
  color: black;
}

.work p {
  text-align: center;
  display: block;
  width: 70%;
  margin: 0 auto;
  padding-bottom: 60px;
  line-height: 20px;
  padding-top: 30px;
}

.work p span {
  display: block;
  padding-top: 10px;
  font-size: 0.8em;
  line-height: 15px;
}

.work h2 {
  text-align: center;
  padding-top: 50px;
  padding-bottom: 20px;
  font-size: 1.3em;
}

.work .site1 {
  width: 100%;
}

.work .site1 img {
  display: block;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 5px;
  box-shadow: 8px 10px 35px black;
}

.work .site2 {
  width: 100%;
}

.work .site2 img {
  display: block;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 5px;
  box-shadow: 8px 10px 35px black;
}

.contact {
  background-color: black;
  overflow: hidden;
  color: white;
}

.contact h1 {
  text-align: center;
  font-size: 3em;
  padding-top: 40px;
  padding-bottom: 20px;
}

.contact form {
  padding-top: 50px;
  text-align: left;
  width: 85%;
  margin: 0 auto;
}

.contact form label p {
  float: left;
  width: 100%;
  padding-bottom: 15px;
}

.contact form input {
  width: 100%;
  float: left;
  margin-bottom: 20px;
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 2px solid #18FFFF;
  height: 30px;
  font-size: 18px;
  background-color: black;
  color: white;
}

.contact form input:focus {
  outline: none;
}

.contact form textarea {
  width: 100%;
  border: #18FFFF solid 2px;
  background-color: black;
  font-size: 18px;
  margin-top: 20px;
  color: white;
}

.contact form input[type=submit] {
  width: 30%;
  padding: 5px;
  margin: 20px auto;
  border-bottom: none;
  border: #18FFFF solid 1px;
  background-color: black;
  color: white;
}

.contact form input[type=submit]:hover {
  color: black;
  background-color: #18FFFF;
  -webkit-transition: background-color 100ms linear;
  -moz-transition: background-color 100ms linear;
  -o-transition: background-color 100ms linear;
  -ms-transition: background-color 100ms linear;
  transition: background-color 100ms linear;
}

    <title>Ivan B</title>
    <link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
    <!--FONTS-->
    <link href="https://fonts.googleapis.com/css?family=Bowlby+One+SC" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

  <body>
    <div class="wrapper">
      <header>
        <nav>
          <div class="menu-icon">
            <img src="images/Menu-64.png">
          </div><!--menu-icon-->
        </nav>
          <div class="menu">
            <div class="menu-nav">
              <ul>
                <li>Home</li>
                <li>Work</li>
                <li>Contact</li>
              </ul>

              <div class="menu-social">
                <img src="images/Instagram.png" alt="instagram" />
                <img src="images/Twitter.png" alt="twitter" />
                <img src="images/LinkedIn.png" alt="linkedin" />
              </div>
            </div><!--menu-nav-->
          </div>
          <div class="background">
            </div><!--BACKGROUND-->
          <div class="bio">

            <div class="hello">
              <h1>Hello...</h>
            </div><!--Hello-->

            <div class="desc">
              <p>Lorem ipsum dolor sit amet, ut movet persius fierent vis, nominavi deseruisse eu vis. Pri eruditi apeirian periculis at, summo scriptorem has in.</p>
            </div><!--desc-->
          </div><!--Bio-->
          <img src="images/arrow-down.png">
      </header>

      <div class="skills-2">
        <h1>Skills</h1>
        <div class="my-skills">
          <ul>
            <li>HTML5</li>
            <li>CSS3</li>
            <li>JavaScript</li>
          </ul>
        </div><!--My SKills-->
        <div class="graph">
          <div class="html bar">
          </div>
          <div class="css bar">
          </div>
          <div class="javascript bar">
          </div>
      </div><!--Graph-->
      </div><!--SKills 2-->
      <div class="work">
        <h1>Work</h1>
        <div class="site1">
          <h2>A very clear statement <br/>of your offer</h2>
          <img src=images/site1.png>
          <p>Lorem ipsum dolor sit amet, ut movet persius fierent vis, <br/><span>*Lorem ipsum dolor sit amet, ut movet persius fierent vis,</span></p>
        </div><!--Site 1-->
        <div class="site2">
          <h2>The Yalow</h2>
          <img src="images/site2.png">
          <p>Lorem ipsum dolor sit amet, ut movet persius fierent vis,<br/><span>Lorem ipsum dolor sit amet, ut movet persius fierent vis,</span></p>
        </div><!--Site 2-->
      </div><!--Work-->
      <div class="contact">
        <h1>Contact</h1>
        <form action="contact.php" method="post">
          <label>
          <p>Name *</p>
            <input type="text" name="name">
          </label>
          <label>
            <p>Your E-mail *</p>
            <input type="text" name="email">
          </label>
          <label>
            <p>Your message *</p>
            <textarea name="message" rows="8" cols="40"></textarea>
          </label>
          <div id="button">
            <input type="submit" name="name" value="Send">
          </div><!--button-->
        </form>
      </div>

​

Answer 1

若要解决图像重叠问题，请向css添加以下更改-

header {
    background-color: black;
    height: 420px;
    position: relative; /* Added */
}    

header .background {
      opacity: 0.2;
      background-image: url(http://lorempixel.com/400/200/sports/1);
      background-repeat: no-repeat;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      background-position: center;
      width: 100%;

      height: 100%;  /* editied */
      top: 0px;     /* added */

      position: absolute;
      overflow: hidden;
    }

Answer 2

在您的css文件:高度:78%，将其更改为38%，它应该为您调整它的大小。当涉及到定位和调整大小时，请始终检查css。

Answer 3

给这个财产

backface-visibility:hidden;

背景图像元素。