我购买了前后对比的 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>
最佳答案
div 并不总是适合每个人的屏幕,因此要克服这个问题,将您的 CSS 样式更改为下面的样式可能是个好主意...
#example img {
width: 100%;
height: auto;
overflow: hidden;
}
如果您需要更多帮助或这不是您要找的,请回复。
关于html - 如何使前后 slider 成为背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24480464/