引导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> 

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>