0

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

0 回答 0