html - 尝试将 CSS 圆定位在图像的顶部

Question

我有一张圆形图片，我希望能够用 CSS 圆形覆盖它。如何定位 CSS 圆，使其始终与圆图像具有相同的高度和宽度？

图片属性如下:

max-width: 270px;
height: 270px;
width: 100%;
border-radius: 50%;
border: none;

谢谢

<li class=\"mis-slide\">
    <a class=\"mis-container\" ">
        <figure>
            <img></img>
            <figcaption>
                <span></span>
                <div>Text</div>
            </figcaption>
        </figure>
    </a>
</li>

Answer 1

假设您知道圆的高度，您可以使用图像下方的 div 的相对位置作为

position: relative;
bottom: 270px;

或图片上方的div

position: relative;
top: 270px;

fiddle :http://jsfiddle.net/444vc9u8/3/