Question

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

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

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

是否可以使用bootstraps标准功能执行此操作？

Answer 1

Agency-Demo正在使用css封面选择器。 cover关键字指定应将背景图像缩放到尽可能小，同时确保其尺寸。结果： •使用图像填充整个页面，没有空白区域 •根据需要缩放图像 •保留图像比例（宽高比） •图像以页面为中心 •不会导致滚动条 •尽可能跨浏览器兼容 •不是像闪光灯这样的花哨恶作剧吗？

.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;
}

Bootstrap无尽的背景图像

1 个答案: