我已经为wordpress网站安装了nivo-slider。这非常有效。 我还有一个nivo-caption(文本覆盖滑块图像)。此文本栏必须位于滑块中的相同位置,无论使用何种屏幕分辨率。 我无法弄明白该怎么做。我正在尝试的是,滑块中的文本栏始终会根据屏幕分辨率调整大小。
该网站是:http://vanschendel.com/wordpress
Css代码nivo-slider:
`
/ *
* jQuery Nivo Slider v3.1
* http://nivo.dev7studios.com
*
*版权所有2012,Dev7studios
*根据MIT许可证免费使用和滥用。
* http://www.opensource.org/licenses/mit-license.php
* /
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
/* Caption styles */
.nivo-caption {
position:absolute;
/*left:0px;*/
/*left:40px;*/
margin:0 auto 0 680px;
bottom:0px;
background:#eaecee;
color:#373737;
/*width:100%;*/
width:5000px;
height:35%;
z-index:8;
padding: 5px 10px;
opacity: 0.9;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}