html - 如何使前后滑块成为背景

我购买了jQuery插件前后，然后制作了一个简单的WordPress主题。但是很少有事情不起作用。我想将此滑块作为背景，因此我将div放置在适合页面的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/

最佳答案

div并不总是适合每个人的屏幕，因此要克服此问题，最好将CSS样式更改为以下样式：

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

如果您需要更多帮助或这不是您想要的，请发表评论。

关于html - 如何使前后滑块成为背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24480464/