图片底部字幕效果

文章目录
  1. 1. 要点:
  2. 2. 效果
  3. 3. HTML结构
  4. 4. LESS
  5. 5. So easy, right ?

要点:

  • 一个容器DIV, 类名称为caption-wrapper
  • caption-wrapper中包含两个子元素 img 和 div.caption-description
  • div.caption-description 中包含一个p.caption-text

效果

图片底部字幕效果

HTML结构

1
<div class="caption-wrapper">
    <img src="../public/images/u311_normal.jpg" alt="" style="width: 800px;"/>
    <div class="caption-description">
        <p class="caption-text">图片底部字幕组件</p>
    </div>
</div>

LESS

overlay-caption.less

1
.caption-wrapper{
    float:left;
    position:relative;
    .caption-description {
        position:absolute;
        bottom:0px;
        left:0px;
        width:100%;
        background-color:black;
        font-family: 'tahoma';
        font-size:15px;
        color:white;
        opacity:0.5;
        filter:alpha(opacity=60); // IE transparency
        .caption-text {
            padding:10px;
            margin:0px;
        }
    }
}

So easy, right ?