nivo-caption相同位置调整窗口大小

时间:2013-01-09 06:40:12

标签: css wordpress nivo-slider

我已经为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+ */
 }

0 个答案:

没有答案