解决了！

Question

这是我的Personal Webpage。尝试使用Chrome和Firefox。预期效果仅在firefox上呈现（仅适用于主页部分）。

但是，当我向下滚动并向上滚动回到主页时，图像会消失。 为什么会发生这种情况，我该如何解决？

另外，如何在Chrome中渲染主页视差滚动效果？

相关代码：

的 HTML：

<section class="featured">
            <div class="container"> 

                <div class="row mar-bot40">
                    <div class="col-md-6 col-md-offset-3">

                        <div class="align-center">
                            <div class="team-member">
                                <figure class="member-photo1" ><img class="works" src="img/Work/me.jpg"  alt="" /></figure>

                        </div>
                            <h2 class="slogan" style="color:white;">name<a style="color:white;font-family: 'Lobster', cursive; font-weight:normal">.com</a></h2><h3 style="font-family: 'Shadows Into Light', cursive; color:#A2F1FE; font-size:35px;"><strong>Inspired by <a style="color:#FF2744">Purpose</a>.<br>Driven by <a style="color:#FF2744">Passion</a>.</strong></h3>
                        </div>
                    </div>
                </div>

                            <div class="row animated opacity mar-bot20" data-andown="fadeIn" data-animation="animation">
                <div class="col-sm-12 align-center">
                    <ul class="social-network social-circle">
            <li><a href="mailto:name@gmail.com" target="_top" class="icoGmail" title="Gmail"><i class="fa fa-envelope"></i></a></li>
                        <li><a href="https://github.com/" class="icoGit" title="Github"><i class="fa fa-github"></i></a></li>
                        <li><a href="https://www.facebook.com/" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="https://twitter.com/" target="_blank" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="https://plus.google.com/+" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="http://stackoverflow.com/users/2477978/"  class="icoStackoverflow" title="Stackoverflow"><i class="fa fa-stack-overflow"></i></a></li>
                        <li><a href="http://www.linkedin.com/pub/-ganguly/52/641/301" class="icoLinkedin" title="LinkedIn"><i class="fa fa-linkedin"></i></a></li>
                    </ul>   
            </div>
            </div>
            </div>

        </section>

CSS：

section.featured {
    padding: 200px 0 255px;
    background: url('homepage.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #fdfdfd;

}

section.featured h2.slogan {
    color: #ffffff;
    font-size: 48px;
    font-weight: 900;
}

 /* inner heading */
section.featured.inner {
    background: #eee;
    padding: 150px 0 50px;
}

Answer 1

解决了！

我注意到当图像没有显示时非常奇怪的行为！

尝试稍微调整一下浏览器的大小！它会告诉你背景   图片！（这可能是我们可以关注的提示）

尝试缩写速记属性！

我刚刚简化了你的短手属性！
然后我删除了background-attachment: fixed;（这就是创建问题）
但我已经检查了3次检查元素及其工作！

删除background-attachment: fixed;属性并再次加载页面！

只需使用这些css：

section.featured {
    padding: 200px 0 255px;
    background-image: url('homepage.jpg');
    background-repeat: no-repeat;
    background-position: center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #fdfdfd;
}

对于性能问题，我注意到了

你使用了很多字体链接（字体很棒，两次，大约15个！太多了）
大约300行嵌入式CSS！
尝试缩小js，css和html并减少http请求！
由于79 http请求网站很慢！

对于标题问题！

我已经分析了你的代码及其最重要的css规则标题看起来不像你想要的那样！

因为我删除了一些css规则！
请删除此规则，我认为这样可以解决您的问题！

css

删除一些css标题后会显示如下

header

对于标题链接

所有内容都删除链接的所有内联样式

remove

现在将此css添加到样式表中！

.navbar .nav>li>a {
font-family: 'Lato', sans-serif !important;
padding: 10px 15px 10px;
color: #fff !important;
}

.navbar .nav>li>a:hover {
color: #ccc !important;
}

Active Link Code Modification！

以下是有效链接颜色背景问题的步骤！ enter image description here

对于有效的彩色链接激活，请确保单击时 on linnk它的<li>变为<li class="active">，然后才变为section.featured { padding: 200px 0 255px; background-image: url('homepage3.jpg'); background-repeat: no-repeat; position: static; background-position: inherit; background-attachment: fixed; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; color: #fdfdfd; } 它将成为活跃的红色！

最后润饰！工作视差效应

{{1}}

final parallax

staaaaaaaaaaakkkkkk

古德勒克

Answer 2

您的HTML已关闭。这样做的副作用就是混淆了javascript。

将HTML视为一个骨架，它应该是对称的，如果它的不对称一侧比另一侧大，这会导致许多内部问题。一方面你不想要5个手指而另一只手只需要3个手指。

您有 174个 <div>个标签，但 178个结束标签。最重要的是，您有 13个开头 <section>标签，但 15个结束标签。我猜测错误是由于注释掉的代码部分造成的。我建议使用IDE（Notepad ++或NetBeans）来指出简单的错误（通过彩色下划线）。这个简单的错误，就像一个缺少的分号，可以防止。

注意W3C标准，他们出于某种原因。 This W3C报告加强了我的假设;修复HTML错误，解决问题。

Answer 3

经过调查我相信问题的根源在于section featured背景图像上使用固定位置的方式。

固定位置不符合Google Chrome中的W3C规范，这也是视差滚动效果无法在Chrome中运行的原因。

只需从背景位置移除固定即可解决滚动时图像消失的问题。

更改

section.featured {
    background: url('homepage.jpg') no-repeat center center fixed; 
}

以

section.featured { background: url('homepage.jpg') no-repeat center center; }

当背景设置为固定时，类似于在背景中放置固定的“div”并将原始div背景设置为透明。

这实际上是Google Chrome中的一个错误。 （尽管它很受欢迎Chrome仍然不符合网络标准以及Firefox。）

解决方案

虽然我无法在您的网站上对此进行测试，但这是针对此错误的解决方法。

将元素和所有父元素的“位置”设置为“静态”，或者如果您已经为其提供了其他值，即“相对'，'已修复'或'绝对'，只需删除它们。

如果元素或任何容器元素，包括：body＆amp; html除了静态之外还有任何位置属性，会发生错误。

<强>此外：

确保未在元素或其任何容器上设置backface-visibility: hidden;，包括：body＆amp; html。

替代解决方案

另一种方法是使用css clip函数创建类似的效果。

CLICK FOR DEMO
DanielPerván的演示

.element { position: relative; height: 400px; } .clipper { position: absolute; clip: rect(auto,auto,auto,auto); width: 100%; height: 100%; } .image { background: url(http://image.jpg) no-repeat 50% 50%; background-size: cover; position: fixed; width: 100%; height: 100%; top: 0; }

Answer 4

Firefox和Chrome看起来和我一样，所以不确定你想要达到的目的是什么。

如果徽标从顶部导航栏中消失，我认为这与line-height：50属性有关。

但我认为你希望homepage.jpg在整个页面的背景上，然后你需要将它移动到正文样式，或者你需要创建一些其他div来保存页面的其余部分或你想要它的位置显示。

您可能需要将问题隔离到自己的简化html版本中，一旦修复它，如果合并时还有其他错误，您可能仍需要以增量方式开始添加其他部分。

Answer 5

删除-webkit-backface-visibility: hidden;（animate.css第14行）。 -webkit-前缀“打破”chrome中的效果。实际上它会创建一个新的重叠静态图像。

如何修复导航栏位置？

5 个答案:

解决了！

对于标题问题！

对于标题链接

Active Link Code Modification！

最后润饰！工作视差效应

古德勒克

解决方案

替代解决方案

CLICK FOR DEMO