CSS: Float a div on another div, Ex: Text caption on picture

weixin_30764137

于 2015-06-01 18:16:00 发布

阅读量63

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/feika/p/4544609.html

本文介绍了一系列增强谷歌地图使用体验的方法，包括如何利用谷歌地图进行精确测量等实用技巧。

<style type="text/css">
    .figure {
        width: 316px;
        height: 205px;
        display: block;
        border-color: azure;
        position: relative;
    }
    .figure img {
        z-index: 0;
    }
    .figure .caption {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 22;
        width:inherit;
        display:inline-block;
        color: #fff;
        background-color: rgba(0,0,0,.5);
        z-index: 100;
    }
</style>

<div class="figure">
    <img src="http://img-aws.ehowcdn.com/320x208/ehow-tech-blog-us/files/2014/07/google-maps-measure.gif" alt="[Article Image] - How to Supercharge Google Maps" title="How to Supercharge Google Maps" class="image">
    <div class="caption"> How to Supercharge Google Maps </div>
</div>