卡圖像覆蓋，卡體溢出

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>