0

我正在尝试在前景中创建一个具有视差滚动和整页边框图像的网站，当您向下滚动时，所有文本/容器都将进入该图像。我正在考虑将边框图像拆分为左右边栏、页眉和页脚，但我担心它的可扩展性。有没有一种方法可以在前景中创建一个具有透明中心的整页边框图像，页面主体将转到该页面的主体，同时在页面主体中仍然具有可点击的链接（技术上是背景）？我正在使用 Rails 5、Bootstrap 3 和 Skrollr 来实现视差效果。

现在我的修复是：

应用程序.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;
}
4

0 回答 0