带覆盖的卡片图像上的Bootstrap 4链接

Question

我正在努力使图像本身上的链接起作用。到目前为止，我只能设法在图像底部的文本叠加层上获得链接，而不能在图像的其余部分上获得链接。每次尝试进行某些操作都会破坏卡的布局，并且覆盖层将不再起作用。任何的想法？

.bg-semitransparent { background-color: rgba(60,60,60,0.6); }

<div class="card text-white">
    <img src="...image" alt="Angel #1" class="img-fluid" style="" />
    <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
        <div class="card-text border-0 bg-semitransparent text-center">
            <a href="...link">Anchor Text</a>
        </div>
    </div>
</div>

Answer 1

如果您愿意，可以尝试以下操作：那是一个简单的技巧，但可以解决您的问题

<div class="card text-white">
<img src="https://dummyimage.com/350x450/" alt="Angel #1" class="img-fluid" style="" />
<a href="...link">
<div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
    <div class="card-text border-0 bg-semitransparent text-center">
        Anchor Text
    </div>
</div>
</a>
</div>