文章/答案/技术大牛

发布

社区首页 >问答首页 >视差背景不能正确对齐

问视差背景不能正确对齐
EN

Stack Overflow用户

提问于 2015-07-09 22:57:24

回答 1查看 788关注 0票数 1

我所拥有的是一个具有视差打开页面的网站。不幸的是，文本部分似乎干扰了滚动背景，因此当页面滚动时，底部视差图像(应为pc显示器大小，然后与文本覆盖)重复出现，而不是水平居中。

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

修复方法似乎应该是在"home- image -3“部分的顶部添加一些填充，但当我这样做时，图像仍然会被分割(重复)，并且会在文本部分添加一个边距，而不会停止重复的图像。因此，我需要一个不同的解决方案。

你可以在这里看到实际的问题，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;
    }
}

javascript

jquery

html

css

回答 1

Stack Overflow用户

发布于 2015-07-10 00:25:42

一个小小的改变就能解决我认为是你的问题。只需停止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

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31321199

复制

相似问题

问视差背景不能正确对齐
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视差背景不能正确对齐EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视差背景不能正确对齐
EN