Question

我试图创建一个圆圈，里面有一个图像，在这个圆圈的页脚中有一个矩形..

更简单的说明解释：http://i.imgur.com/yK7Edrc.png

我有点迷路了，我该如何处理圈子页脚上的信息框？

感谢。

代码：

HTML：

<img class="wow rotateIn" src="http://lorempixel.com/250/250/">

CSS：

img {
    margin: 10px 0 20px 0;
    width: 254px;
    height: 254px;
    border-radius: 50%;
    border: 2px solid #f98835; 
}

Answer 1

你需要

将图像包装在容器中
制作容器position:relative - 这允许您将.caption div相对于此父div定位
将矩形相对于容器div的底部绝对定位

HTML

<div class="circle_image_box_with_caption">
    <img class="wow rotateIn" src="http://lorempixel.com/250/250/">
    <div class="caption">
        This is my caption text
    </div>
</div>

或HTML5

<figure class="circle_image_box_with_caption">
    <img class="wow rotateIn" src="http://lorempixel.com/250/250/">
    <figcaption class="caption"> <!-- don't need the class really since it's already a semantic element and can be targeted in css with .circle_image_box_with_caption figcaption -->
        This is my caption text
    </figcaption>
</figure>

CSS

.circle_image_box_with_caption {
    position:relative;
    width: 254px;
    height: 254px;

}
.circle_image_box_with_caption img {
    margin: 10px 0 20px 0;
    width:100%;
    height:100%;
    border-radius: 50%;
    border: 2px solid #f98835; 
}
.circle_image_box_with_caption .caption {
    position: absolute;
    bottom: -20px;
    border: 1px solid #ccc;
    width: 100%;
    text-align: center;
    padding: 10px 0px;
    background: #ccc;
}

小提琴：http://jsfiddle.net/77b34nh0/2/

复杂的圆圈里面有图像

1 个答案: