时间戳

首页 > 解决方案 > Card Img Overlay，溢出卡体

javascript - Card Img Overlay，溢出卡体

问题描述

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

检查演示

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 演示中那样使用播放按钮 在此处输入图像描述

标签： javascripthtmlcssbootstrap-4

解决方案

您应该将“位置：相对”添加到链接元素（），以便覆盖连接到它而不是更高的父级

    <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”&lt;/a></h5>
</div>

推荐阅读