Bootstrap无尽背景图片

在此布局中： choose Agency-Demo, 它们使用全屏背景图像。当你开始滚动时，背景被内容（div容器）覆盖。滚动时，可以看到背景发生变化，并再次被以下内容覆盖。Bootstrap无尽背景图片

他们如何根据设备的屏幕尺寸找到正确的内容定位？

他们如何根据卷动高度添加不同的类？

是否可以使用bootstraps标准功能来做到这一点？

2015-02-24 nofear87

您是否只是指在您滚动时保持固定的全宽度背景图像？如果是这样，那只是CSS''background-attachment：fixed;' – j08691 2015-02-24 15:24:53

不，特别是我搜索他们的方式，他们做了第一个覆盖div的初始定位，内容是“A THEME FOR CREATIVES＆AGENCIES”滚动）以及它们如何取代背景（全屏图像），具体取决于文档的卷动高度。如果可能，我更喜欢唯一的CSS方式。 – nofear87 2015-02-24 15:30:09

我很困惑，因为你提到的“创意与主题主题”部分，就是这样一个没有背景的部分元素。它并没有做任何事情，但是它背后的背景（还有一点点就是上面提到的背景图像，没有什么特别的做法，也没有滚动检测。 – j08691 2015-02-24 15:38:49

Agency-Demo使用的是css封面选择器。封面关键字指定在确保其尺寸的同时缩放背景图像以尽可能小。结果： •填充整个页面图像，没有空格 •可扩展至图像根据需要 •保留图像的比例（纵横比） •影像页上居中•不引起滚动条 •作为跨浏览器兼容的可能 •是不是一些花哨的把戏像Flash

.demo-header { 
text-align: center; 
background: url('assets/img/bg-header.jpg') no-repeat center center scroll; 
color: #fff; 
-webkit-background-size: cover; 
background: cover; 
padding: 100px 0; 
}

对于您可以使用下面的代码跨浏览器兼容。

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

来源

2015-02-24 18:39:15 Denise

谢谢！他们如何改变那里的导航栏？无法找到任何他们如何添加导航栏扩展类。 – nofear87 2015-03-06 17:27:02

Bootstrap无尽背景图片

回答

相关问题