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>

Answer 2

解决方案1

通过更改HTML代码结构

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<a href="...link"><div class="card text-white">
    <img src="https://dummyimage.com/450x450/" 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">
            Anchor Text
        </div>
    </div>
</div>
</a>

解决方案：2

使用JQuery

$(".card").click(function() {
  window.location = $(this).find("a").attr("href"); 
  return false;
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card text-white">
    <img src="https://dummyimage.com/450x450/" 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>

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

2 个答案: