html - 如何使前后 slider 成为背景

Question

我购买了前后对比的 jQuery 插件，并制作了一个简单的 WordPress 主题。但很少有事情是行不通的。我想把这个 slider 作为我的背景，所以我制作了 slider 适合页面的 div，但它不适合。这是我的第一个问题。

我的第二个问题是重力形式会产生一些奇怪的东西，它们会阻止某些功能，但我会解决这个问题。

代码如下:

CSS:

html {
width: 100%;
}

body {
background-color:#A6B8CC;
margin: 0px!important;
}
.titlelogo {
background-image:url(../images/sitelogo.png);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
padding-top:35px;
margin-top:20px;
margin-bottom:-5px;
display:block;
width:250px;
height:98px;
}
#big_divider {
margin-top:150px;
}

#example{
margin:  auto;
padding: 0px!important;
}

#example img {
max-width: 100vw;
max-height: 100vh;
}

#after {
max-height: 100vh;      
max-width: 100vw;
}

ul {
margin:0px!important;
}

#secondary {
display: none;
}

ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 0em!important;
-webkit-margin-after: 0em!important;
-webkit-margin-start: 0px!important;
-webkit-margin-end: 0px!important;
-webkit-padding-start: 0px!important;
}

#ext_ext_after {
margin: 0 auto;
}

html:

<div id="example" class="beforeafter_slider shadow1">

            <ul>            

                <!-- THE 1. SLIDE -->
                <li><img src="<?php bloginfo('template_url'); ?>/img/extralightgethaldus2.jpg" alt="<?php bloginfo('template_url'); ?>/img/withglassesgethaldus2.jpg">
                        <div id="textbox_1" class="before">
                            <div id="title_1b" class="fadeup">BEFORE</div>
                        </div>

                        <div id="textbox_1" class="after">
                            <div id="title_1b" class="fadeup">AFTER</div>
                        </div>

                        <div id="textbox_snw">

                            <div id="title" class="fadeup">Don't let the sun be your enemy!</div>
                            <div id="title2" class="fadeup">Do you consider yourself unique?<br>Your glasses should be as well.</div>

                            <div id="description" class="fadeup">We are soon lounching a new eyeware webshop<br>like you've never seen before across all Europe.<br><br>
                                                                Right now we cannot say anithing else, but if you want<br> to be among the firs to be noticed what it's all about<br>
                                                                leave your e-mail adress below and join our community.</div>    
                        </div>
                </li>
            </ul>


        </div>

这是链接:http://svinaweb.hr/gethaldus-lp/

Answer 1

div 并不总是适合每个人的屏幕，因此要克服这个问题，将您的 CSS 样式更改为下面的样式可能是个好主意...

#example img {
width: 100%;
height: auto;
overflow: hidden;
}

如果您需要更多帮助或这不是您要找的，请回复。