如何在此部分添加固定背景? [包括演示]

时间:2016-10-27 09:01:41

标签: html css

我正在尝试将固定背景添加到我的网页的这一部分。 当有人向下滚动到另一个部分时,我会添加背景颜色,而不是图像 我不知道如何解释这个,所以我在我的网站上做了一个演示: demo image explanation

我已经尝试过了:

.cd-fixed-bg {
    min-height: 100%;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
}
.cd-fixed-bg.cd-bg-1 {
    background-image: url(" IMAGE URL IS HERE ");
}

我的HTML代码(上面没有此css):

http://image.prntscr.com/image/46acb1e7d1d1407ea63797ca157b2bbb.png 这并没有按照我想要的方式运行,所以我也上传了demo: demo
PS。忽略俄罗斯手机图像,我只是在测试一些东西 我尝试了一些其他的CSS技巧,但没有正常工作。
感谢。


由于问题的答案是正确的,因此删除了演示。谢谢!

2 个答案:

答案 0 :(得分:1)

这里的工作正常:http://csgotale.com/stackoverflow-demo/index-with-my-try.html

但是,添加到 html,正文 h1 margin: 0; padding: 0;

如果您想制作视差效果,请在此处执行:http://codepen.io/powro01/details/pEBBgR/

答案 1 :(得分:0)

我猜你只能用CSS来实现这个效果;你需要一些JS代码。

他们并不是您正在寻找的东西我建议您查看这些内容以了解它们是否有用:

https://github.com/razorfish/Parallax-JS

https://github.com/cyntss/Parallax-img-scroll