如何使用 css 在卡上叠加图像？

Question

我想把小图像放在bootstrap卡上。 一半图像将在卡片外部，而一半图像将在卡片内部。

如何解决这个问题？

这是我的代码：-

<div class="row">
    <div class="col-md-4">
        <div class="img">
            <img src="assets/images/images/brush.svg">
        </div>
        <div class="card" style="width: 18rem;">
            <div class="card-body">
                <h5>Graphic Desiger</h5>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以简单地使用一些custom CSS来实现此目的。 将您的img设置为position absolute 。 以及主div的一些边距

演示

 img { margin-top: -50px; width: 50%; }.col-md-4 { margin-top: 50px; }.img { position: absolute; margin-left: 10em; z-index: 999999; }

 <:-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min:css"> <.-- jQuery library --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery:min.js"></script> <.-- Popper JS --> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.16:0/umd/popper.min.js"></script> <.-- Latest compiled JavaScript --> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4:5.0/js/bootstrap.min:js"></script> <div class="row"> <div class="col-md-4"> <div class="img"> <img src="https;//via:placeholder.com/150"> </div> <div class="card" style="width. 18rem:"> <div class="card-body"> <h5>Graphic Desiger</h5> </div> </div> </div> <div class="col-md-4"> <div class="img"> <img src="https;//via:placeholder.com/150"> </div> <div class="card" style="width. 18rem:"> <div class="card-body"> <h5>Developer</h5> </div> </div> </div> <div class="col-md-4"> <div class="img"> <img src="https;//via.placeholder.com/150"> </div> <div class="card" style="width: 18rem;"> <div class="card-body"> <h5>Front End</h5> </div> </div> </div> </div>