Question

对于一个课程项目，我有一个想法，建立一个类似于此的论坛，但用户得到报酬的回答。所以我提出的想法是，在主屏幕上列出所有问题，用户整个问题可以用作div的背景图像然后使用视差滚动，所以当你向下滚动时你会看到更多的问题。甚至有可能做到这一点？

Answer 1

我认为您希望使用Parallax显示/隐藏您的问题：

您可以使用一些JavaScript将文本转换为图片：Convert Text to Image using javascript

我认为这是你正在寻找的但没有测试过它^^

Answer 2

parallax css

＆＃13;

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    font-family: 'segoe ui';
}
.block-parallax {
    overflow: hidden;
    position: relative;
}
.block-parallax .parallax-bg {
    background-attachment: fixed;    
    background-position: 0px 0px;
    background-repeat: repeat;
    height: 100%;
    position: absolute;
    width: 100%;
    min-width: 1170px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}
.block-parallax .md-box {
    padding: 200px 0 200px;
    background: rgba(0, 0, 0, 0.75);
    position: relative;
    height: 100%;
    text-align: center;
}
.block-parallax .md-box h1 {
    color: #fff;
}
.block-parallax-1 .parallax-bg {
    background-image: url('http://maque.org.ua/wordpress/wp-content/uploads/2011/12/html5.jpg');
}
.block-parallax-2 .parallax-bg {
    background-image: url('http://myrusakov.ru/images/articles/html5-local-storage.jpg');
}
.block-parallax-3 .parallax-bg {
    background-image: url('http://www.webdesignmagazine.ru/wp-content/uploads/2013/09/html5_structure.png');
}
.block-parallax-4 .parallax-bg {
    background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQog6awkbZ2gnKtf5Z_bvDJInkn2aBOXti_oWB8LvC1uiJS-Rdv');
}
h2 {
    color: #555;
    text-align: center;
    padding: 25px 0;
    margin: 0;
}

＆＃13;

<section class="block-parallax block-parallax-1">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h1>background 1</h1>
    </div>
</section>
<section class="block-parallax   block-parallax-2">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h1>background 2</h1>
    </div>
</section>
<section class="block-parallax  block-parallax-3">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h1>background 3</h1>
    </div>
</section>
<section class="block-parallax  block-parallax-4">
    <div class="parallax-bg"></div>
    <div class="md-box">
         <h1>background 4</h1>
    </div>
</section>

＆＃13;

你能否将div的信息设置为另一个div的背景图像？

2 个答案: