内部带有图像的复杂圆圈

Question

我正在尝试创建一个内部带有图像的圆圈，并在该圆圈的页脚中创建一个矩形..

显示解释更简单：http://i.imgur.com/yK7Edrc.png

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

我有点迷茫，圆圈底部的信息框怎么办？

谢谢。

代码：

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

你需要

1. 将图像包装在容器中

2. 制作容器position:relative - 这允许您将.caption div 相对于该父div 定位

3. 相对于容器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/