Question

我正在尝试创建一个网页，其中包含视差滚动和前景中的整页边框图像，当您向下滚动时，所有文本/容器都将被置于下方。我在考虑将边框图像分成左边和右边。右侧杆，头部和＆amp;页脚，但我担心这个的可扩展性。有没有办法在前台创建一个完整的页面边框图像，其中一个透明的中心，页面的主体将在页面主体中具有可点击的链接（技术上是背景）？我正在使用Rails 5，Bootstrap 3和Skrollr来实现视差效果。

现在我的修复是：

application.html.erb：

<!DOCTYPE html>
<html>

<meta tags...></meta tags>

<head>
<title><%= full_title(yield(:title)) %></title>
  <nav class="navbar navbar-fixed-top"><%= image_tag 'header.png', style: 'width:100%;' %></nav>
  </head> <body>


<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

<div id="skrollr-body">

    <%= render 'layouts/application_layout' %>
    <%= render 'layouts/sidebar-left' %>
    <%= render 'layouts/sidebar-right' %>

    <%= yield %>

<script type="text/javascript">
    skrollr.init({
        forceHeight: false;
        smoothScrolling: true
    });
  </script>
  </div></body>
    <nav class="navber navbar-fixed-bottom"><%= image_tag 'footer.png', style: 'width:100%;' %></nav>
</html>

这是相关的css：

.sidebar-left {
    background-image: url('side-l.png');
    height: 100%;
    width: 160px;
    position: fixed;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 99;
    top: 0;
    left: 0;
    overflow-x: hidden;
}

.sidebar-right {
    background-image: url('side-r.png');
    height: 100%;
    width: 160px;
    position: fixed;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 99;
    top: 0;
    right: 0;
    overflow-x: hidden;
}

head {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 102;
    top: 0;
}

使用视差滚动创建整页边框图像

0 个答案: