为了账号安全,请及时绑定邮箱和手机立即绑定

9分16秒,设置幻灯片样式后h3从一行变成两行,另外图片不显示,这是哪里出问题了呀?

修改(设置position: absolute)的片段:

.slider .main .main-i{
   opacity: 0;
   position: absolute;
   right: 50%;
   top: 0;
}

然后修改之前的截图:

575a58280001364f05000267.jpg

575a58290001a7b205000267.jpg


修改之后的截图:

575a587a0001c58d05000267.jpg

575a587b00010e5b05000267.jpg

这是为什么呢,我找了对比了很久,也没发现控制台那边有什么区别呀?

求大神们指点一下,感激不尽!


另附完整html代码:

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Preview Slideshow</title>
   <style>
      * {
         padding: 0;
         margin: 0;
      }

      body {
         padding: 50px 0;
         background-color: #FFF;
         font-size: 14px;
         font-family: 'Avenir Next';
         color: #555;
         -webkit-font-smoothing: antialiased; /*字体抗锯齿*/
      }

      .slider .main.main-i,
      .slider .main,
      .slider{
         width: 100%;
         height: 400px;
         position: relative;
      }
      /*幻灯片区域*/
      .slider .main{
         overflow: hidden;
      }

      /*每一个幻灯片样式*/
      .slider .main.main-i{}
      .slider .main .main-i img{
         width: 100%;
         position: absolute;
         left: 0;
         top: 0;
         z-index: 1;
      }
      .slider .main .main-i .caption{
         position: absolute;
         right: 50%;
         top: 30%;
         z-index: 9;
      }
      .slider .main .main-i .caption h2{
         font-size: 40px;
         line-height: 50px;
         color: #B5B5B5;
         text-align: right;
      }
      .slider .main .main-i .caption h3{
         font-size: 70px;
         line-height: 70px;
         color: #000000;
         text-align: right;
         font-family: 'Open Sans Condensed';
      }

      /*控制按钮区域*/
      .slider .ctrl{
         width: 100%;
         height: 13px;
         line-height: 13px;
         text-align: center;
         position: absolute;
         left: 0;
         bottom: -13px;
      }

      .slider .ctrl .ctrl-i{
         display: inline-block;
         width: 150px;
         height: 13px;
         background: #666;
         box-shadow: 0 1px 1px rgba(0,0,0,.3);
         position: relative;
         margin-left: 1px;
      }

      .slider .ctrl .ctrl-i img{
         width: 100%;
         position: absolute;
         left: 0;
         bottom: 50px;
         z-index: 1;
         opacity: 0;
         -webkit-transition: all .2s;    /*过渡动画*/

      }
      /*hover到控制按钮的样式*/
      .slider .ctrl .ctrl-i:hover{
         background-color: #F0F0F0;
      }
      .slider .ctrl .ctrl-i:hover img{
         bottom: 13px;
         -webkit-box-reflect: below 0px -webkit-gradient(
            linear,
            left top,
            left bottom,
            from( transparent ),
            color-stop( 50%, transparent ),
            to( rgba(255,255,255,.3) )
         );
         opacity: 1;
      }
      /* active 当前展现的状态*/
      .slider .ctrl .ctrl-i_active:hover,
      .slider .ctrl .ctrl-i_active{
         background-color: #000;

      }
      .slider .ctrl .ctrl-i_active:hover img{
         opacity: 0;
      }

      /* 幻灯片切换的样式 */
      .slider .main .main-i{
         opacity: 0;
         position: absolute;
         right: 50%;
         top: 0;
      }
      .slider .main .main-i_active{
         opacity: 1;
         /*right: 0;*/

      }
   </style>
</head>

<body>
   <div class="slider">
      <div class="main">
         <div class="main-i main-i_active">
             <div  class="caption">
               <h2>h2 caption</h2>
               <h3>h3 caption</h3>
            </div>
             <img src="imgs/{{index}}.jpg"/>
          </div><div class="main-i">
         <div  class="caption">
            <h2>h2 caption2</h2>
            <h3>h3 caption</h3>
         </div>
         <img src="imgs/{{index}}.jpg"/>
      </div>
      </div>

      <div class="ctrl">
          <a class="ctrl-i ctrl-i_active" href="javascript:;">
            <img src="imgs/{{index}}.jpg"/>
         </a><a class="ctrl-i" href="javascript:;">
            <img src="imgs/{{index}}.jpg"/>
         </a>
       </div>
   </div>
</body>
</html>


正在回答

1 回答

将position: absolute改成relative后,网页效果和视频上的一致。

.slider .main .main-i{
   opacity: 0;
   position: absolute;
   right: 50%;
   top: 0;
}

又分析了一下,发现设置absolute时,img是相对于class=main-i main-i_active的div元素的,而main-i main-i_active内又是设置absolute的,按我的理解是,这个div位置不变,img就不变,那为什么视频内却是改变了呢?

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

9分16秒,设置幻灯片样式后h3从一行变成两行,另外图片不显示,这是哪里出问题了呀?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信