背景圖片與另一個div重疊

Question

當視口變高或變寬時，我試圖阻止重疊的技能div的.background圖像。 我嘗試了許多不同的事情，但我沒有運氣。 請幫我！ 我對此很陌生，所以如果我做的一件簡單的愚蠢的事情引起了這個問題，請不要感到驚訝。 謝謝！

 $(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文件中：height：78％更改為38％，它應該為您調整大小。 定位和調整大小時，請務必檢查CSS。

Answer 3

給這個財產

backface-visibility:hidden;

您的背景圖片元素。