Css定位

时间:2016-11-01 17:07:52

标签: css sass compass

我尝试达到与本网站相同的效果 http://www.rumba.com.br/

我会这样描述:

  • 元素列表(或标题)
  • 悬停在列表中的某个元素上时,背景中会显示一个图像

我尝试仅使用CSS重现此效果。 它运作得很好,但是现在,我坚持找到"列表" (在我的案例中为figcaption)在页面底部。 我想要"列表的最后一个元素","标题三"在这个例子中,位于页面的底部。

Codepen:

http://codepen.io/AmauryH/pen/QKexJq

HTML:

    <header>
        <figure>
        <figcaption>Title One</figcaption>
        <img src="http://amauryhanser.com/vrac/01.png" />
    </figure>
    <figure>
        <figcaption>Title Two</figcaption>
        <img src="http://amauryhanser.com/vrac/02.png" />
    </figure>
    <figure><figcaption>Title Three</figcaption>
        <img src="http://amauryhanser.com/vrac/03.png" />
    </figure>
</header>
<section>
    Remaining content...
</section>

SCSS:

@import "compass/css3";
@import "compass/reset";

* {
  @include box-sizing(border-box);
}
html {
  height:100%;
}
body {
  background: #000;
  height:100%;
  color:white;
}

header {
  position:relative;
  overflow:hidden;
  width:100%;
  height:100%;
  figure {
    width:400px;
    figcaption {
      margin: 10px 20px;
      z-index:2;
      cursor: pointer;
      font:40px arial, sans-serif;
      color:#fff;
      &:hover + img{
        @include opacity(1);
      }
    }
    img {
      z-index:-1;
      position:absolute;
      left:0;
      top:0;
      @include opacity(0);
      width:100%;
      @include transition(opacity 2s ease-in-out);
    }
  }
  & + section {
    background:#333;
    height: 500px;
  }
}
你知道吗? 提前谢谢!

阿默里

1 个答案:

答案 0 :(得分:1)

所以,这就是我要解决的问题:

  • 添加了一个div包装所有
  • 添加了“display:table-cell; vertical-align:bottom;”到这个div
  • 在标题
  • 中添加了“display:table”

codepen已更新,似乎可以正常工作。