卡图像覆盖，卡体溢出

Question

我的页面上有卡片。顶部有一个缩略图和一个叠加层。 卡的主体必须在覆盖层之外，但会溢出到主体上

查看演示

https://codepen.io/snarex/pen/NWKbgZM

这是我的名片设计样本

    <div class="card shadow bg-white rounded">
<a href="#">
    <img src="https://placeimg.com/640/360/any" class="card-img-top" alt="...">

    <div class="card-img-overlay text-center d-flex">
        <img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png"
             class="w-25 align-self-center mx-auto "
             alt="">
    </div>
</a>
<div class="card-body">
    <h5 class="card-title">
        <a href="#" class="text-info">*</a></h5>
</div>

我期待有这样的东西，但是像Codepen演示一样具有播放按钮

Answer 1

您应该在链接element（）上添加“ position：relative”，以便覆盖层与其连接，而不是更高的父级

    <div class="card shadow bg-white rounded">
        <a href="#" class = "position-relative">
    <img src="https://placeimg.com/640/360/any" class="card-img-top" alt="...">

    <div class="card-img-overlay text-center d-flex">
        <img src="http://wptf.com/wp-content/uploads/2014/05/play-button.png"
             class="w-25 align-self-center mx-auto "
             alt="">
    </div>
</a>
<div class="card-body">
    <h5 class="card-title">
        <a href="#" class="text-info">Hızlı olan kazansın: SEO’nun gizli kahramanı “Page Speed”</a></h5>
</div>