如何在前后滑块中创建背景

时间:2014-06-29 21:30:44

标签: html css

我买了之前的jQuery插件,我做了一个简单的WordPress主题。但很少有东西不起作用。我想把这个滑块作为我的背景,所以我创建了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/

1 个答案:

答案 0 :(得分:0)

div并不总是适合每个人的屏幕,所以为了克服这个问题,将CSS风格改为下面的CSS样式可能是一个好主意......

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

如果您需要更多帮助,请回复,否则这不是您想要的。