Question

我所拥有的是一个带有视差开启页面的网站。不幸的是，文本部分似乎干扰了滚动背景，因此当页面滚动时，底部视差图像（应该是pc监视器的大小，然后是文本覆盖它）重复而不是水平居中。

我使用自己简单的javascript视差函数使用基础，但是由于我对javascript相对缺乏经验，我正努力解决问题。

修复应该是什么似乎是在＆＃34; home-image-3＆＃34;的顶部添加一些填充。部分，但是当我这样做时，图像仍然被分割（重复）并且边缘被添加到文本部分并且不会停止重复图像。因此我需要一个不同的解决方案

您可以在此处查看问题http://r3gamers.com/spratters53/

请注意，图像1和2（键盘和建筑物）工作正常，图像3（ps4）再次从图像底部开始。这几乎不值得注意，但令人讨厌的是图像没有正确对齐。

HTML

<!doctype html>
<html class="no-js" lang="en">
  <head>
<link rel="icon" type="image/png" href="img/favicon.png">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dan Spratling | Portfolio</title>
    <link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/foundation.css" />
</head>

<body class="darkgrey">
<div class="fixed shadow" id="includeHeader"></div>

<div class="large-12 text-center paddingtb-20">
    <h1>Welcome!</h1>
    <h3>Take a look around. Make yourself at home!
</div>

<section id="home-image" data-speed="6" data-type="background">
</section>

<section id="home" data-speed="4">
    <div id="#robin" class="fullwidth row padding-10">
        <div class="large-8 large-centered medium-12 small-12 columns">
            <h2>I am a web developer</h2>
            <h4>Need a website created or updated?  Get in touch!</h4>
            <br/><br/>
            I've been developing websites for 3 years, since I started university. When I started university, most of the subject was new to me, having only studied database theory before. 
            Since 2012, I've tried my hand at many different forms of computing however I've found that I love developing websites, especially the front end (<i>how it looks</i>).
            I'm now looking for work in Devon to help enhance my ability and start working in a commercial environment.
        </div>
    </div>
</section>

<section id='home-image-2' data-speed='6' data-type='background'></section>

<section id="home" data-speed="4">
    <div id="#robin" class="fullwidth row padding-10">
        <div class="large-8 large-centered medium-12 small-12 columns">
            <h2>I began learning my craft at Plymouth University</h2>
            <h4>But my learning never really stops! </h4>
            <br/><br/>
            I studied computing, covering a range of subjects. Web development isn't my only skill, it's what I love, but I've had experience working with so much more. 
            Due to the nature of the course, I have worked with C#, C, ASP.NET, Java, HTML, CSS, Javascript, PHP .. and that's just coding languages! I've worked with MySQL, SQL Server, and Oracle databases. 
            On top of programming, I've had a lot of experience working with the "business end" of software development, meaning that I am able to do (or understand) a lot more than just coding up a design that's been made for me. 
            <br/>I've had to:
            <br/>
            <ul>
                <li>Design projects from just an idea; creating proper design documentation such as Entity Relationship Diagrams and Concept Maps</li>
                <li>Test on the go; by myself, and with real users, getting as much feedback as possible</li>
                <li>Work with a team; using methodologies such as Agile (SCRUM) to help this process</li>
                <li>Create projects which have both a short (less than a month) and long (up to a year) development schedule</li>
                <li>Learn on the go! - I don't know everything, but I'm persistent and dedicated and will always find a way to complete my objective</li>
            </ul>
        </div>
    </div>
</section>

<section id='home-image-3' data-speed='6' data-type='background'></section>

<section id="home" data-speed="4">
    <div id="#robin" class="fullwidth row padding-10">
        <div class="large-8 large-centered medium-12 small-12 columns">
            <h2>I am a gamer, among other things</h2>
            <h4>After all, you can't work all the time!</h4>
            <br/><br/>
            While I love developing websites, everybody needs some time for their hobbies. In my spare time I love to play video games. Maybe it's because it's so diverse, being both social and mentally stimulating in many ways.
            Living in Plymouth also provides a great opportunity to visit local beaches and go on the occasional day out surfing.
        </div>
    </div>
</section>

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
  $(document).foundation();
</script>
<script src="js/vendor/modernizr.js"></script>
<script>
        $("#includeHeader").load("Navigation.html");
</script>
<script src="js/parallax.js"></script>
</body>

parallax.js

$(document).ready(function(){
   // cache the window object
   $window = $(window);

   $('section[data-type="background"]').each(function(){
     // declare the variable to affect the defined data-type
     var $scroll = $(this);

      $(window).scroll(function() {
        // HTML5 proves useful for helping with creating JS functions!
        // also, negative value because we're scrolling upwards                             
        var yPos = -($window.scrollTop() / $scroll.data('speed')); 

        // background position
        var coords = '50% '+ yPos + 'px';

        // move the background
        $scroll.css({ backgroundPosition: coords });    
      }); // end window scroll
   });  // end section function
}); // close out script

//creates html5 element in IE
document.createElement("section");

CSS

.darkgrey {
    background-color: rgb(30,30,30);
}

.shadow {
    box-shadow: 0px 0px 10px 2px black;
}

.border {
    border-style: solid;
    color: black;
    border-width: 1px;
}

div.overlay {
    position: absolute;
    top: 0px;
}

a.darken {
    display: block;
    background: black;
}

a.darken img {
    display: block;
    opacity: 0.9;

    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.25;         
}

h2.brighten, h4.brighten{
    display: block;
    opacity: 0;
    color: white;
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

a.darken:hover h2.brighten, a.darken:hover h4.brighten{
    opacity: 1;
}

.caption { 
  position: absolute;
  top: 40%;
  left: 0px;
  color: #ffffff; 
  text-align:center; 
  font-weight:bold; 
  opacity:0.7; 
  z-index: 10;
}

.relative {
    position: relative;
}

.fullwidth {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   max-width: 80% !important;
}

.fullheight {
    height: 100% !important;
}

.padding-10 {
    padding: 10px;
    margin-bottom: 0;
}

.padding-20 {
    padding: 20px;
}

.paddingtb-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.paddingtb-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.margin-10 {
    margin: 10px;
}

.margin-20 {
    margin: 20px;
}

.margintb-10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.margintb-20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.lightborder {
    border: 1px #5C5B5A solid;
    border-radius: 3px;
    transition: transform 500ms ease-in-out;
}

#home-image {
    background: url(../img/keyboard.jpg) 50% 0 fixed;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
    padding: 300px 0;
}

@media (max-width: 1280px) {
    #home-image {
        background: url(../img/keyboard1280.jpg) 50% 0 fixed;
        padding: 200px 0;
    }
}

@media (max-width: 760px) {
    #home-image {
        background: url(../img/keyboard720.jpg) 50% 0 fixed;
        padding: 100px 0;
    }
}

@media (max-width: 480px) {
    #home-image {
        background: url(../img/keyboard480.jpg) 50% 0 fixed;
        padding: 60px 0;
    }
}

#home-image-2 {
    background: url(../img/plymouth.jpg) 50% 0 fixed;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
    padding: 300px 0;
}

@media (max-width: 1280px) {
    #home-image-2 {
        background: url(../img/plymouth.jpg) 50% 0 fixed;
        padding: 200px 0;
    }
}

@media (max-width: 760px) {
    #home-image-2 {
        background: url(../img/plymouth720.jpg) 50% 0 fixed;
        padding: 100px 0;
    }
}

@media (max-width: 480px) {
    #home-image-2 {
        background: url(../img/plymouth480.jpg) 50% 0 fixed;
        padding: 60px 0;
    }
}

#home-image-3 {
    background: url(../img/console.jpg) 50% 0 fixed;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
    padding: 300px 0;
}

@media (max-width: 1280px) {
    #home-image-3 {
        background: url(../img/console1280.png) 50% 0 fixed;
        padding: 200px 0;
    }
}

@media (max-width: 760px) {
    #home-image-3 {
        background: url(../img/console720.png) 50% 0 fixed;
        padding: 100px 0;
    }
}

@media (max-width: 480px) {
    #home-image-3 {
        background: url(../img/console480.png) 50% 0 fixed;
        padding: 60px 0;
    }
}

Answer 1

一个小小的改变将解决我认为你的问题。只需停止PS4背景重复并将背景设置为白色......

#home-image-3 {
    background: rgb(255, 255, 255) url(../img/console.jpg) 50% 0 fixed no-repeat;
    height: auto;
    margin: 0 auto;
    width: 100%;
    position: relative;
    box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
    padding: 300px 0;
}

视差背景不能正确对齐

1 个答案: