Fatal编程技术网
  • css/
  • Css 使用视差滚动创建整页边框图像

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

css twitter-bootstrap

Css 使用视差滚动创建整页边框图像,css,twitter-bootstrap,parallax,border-image,Css,Twitter Bootstrap,Parallax,Border Image,我正在尝试创建一个视差滚动的网站，在前景中有一个完整的页面边框图像，当你向下滚动时，所有的文本/容器都会进入其中。我曾考虑将边框图像拆分为左侧和右侧栏、页眉和页脚，但我担心其可伸缩性。有没有一种方法可以在前景中创建一个完整的页面边框图像，其中有一个透明的中心，页面的主体将位于该中心，而页面的主体（技术上是背景）中仍然有可点击的链接？我正在使用Rails 5、Bootstrap 3和Skrollr来实现视差效果 目前我的解决方案是： application.html.erb： <!DOCTY

我正在尝试创建一个视差滚动的网站，在前景中有一个完整的页面边框图像，当你向下滚动时，所有的文本/容器都会进入其中。我曾考虑将边框图像拆分为左侧和右侧栏、页眉和页脚，但我担心其可伸缩性。有没有一种方法可以在前景中创建一个完整的页面边框图像，其中有一个透明的中心，页面的主体将位于该中心，而页面的主体（技术上是背景）中仍然有可点击的链接？我正在使用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>
我现在有一个工作模型，使用左侧和右侧栏以及页眉和页脚作为图像，z索引值高于正文，但我不喜欢侧栏图像与页眉/页脚图像接触的方式。我想我可以在平面设计中解决这个问题，但仍然在寻找更好的完整页面边框图像解决方案。请分享您迄今为止所做的工作，刚刚编辑添加相关代码 
.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;
}