如何在卡片后面放置 img 并使其响应

Question

我想将图像放在卡片后面并使其具有响应性

分享我的代码毫无用处，因为我真的不知道在哪里解决这个问题。
我已经尝试将 img 放在:after或:before中，但我无法让它不破坏卡片容器的display:flex ，我尝试使用z-index将它放入卡片中，但它会创建一个文本前的空格。
所以我试着把我想做的事情图解化，非常感谢！ :)


我想要的丑图：D

Answer 1

您可以使用 position 相对于父级和 position 绝对值到要放置在后面的图像并调整顶部和底部值

密码笔

 .main-row>div{ background-color: #ffd5ff; border-radius: 24px; }.main-row p::first-letter { color: red; font-size: xx-large; }.main-row.smily { position:absolute; top:-35px; left:-35px; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"> <div class="container"> <div class="row main-row d-flex text-justify mt-5 d-flex justify-content-between position-relative"> <img src="https://pngimg.com/uploads/smiley/smiley_PNG155.png" style="height:60px; width:auto;" class="smily"> <div class="col-lg-3 para1 p-4 shadow mb-4"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, rem ratione deserunt necessitatibus ducimus excepturi quisquam hic, eum esse dignissimos laboriosam assumenda sapiente voluptas fugiat nulla inventore repellat consequuntur quasi? Soluta mollitia voluptatibus molestiae, magnam rerum accusamus veritatis minima totam veniam, Incidunt ratione cupiditate quia aspernatur excepturi sit dolorum, fugit harum officia hic quam beatae itaque pariatur atque. Deserunt. provident,</p></div> <div class="col-lg-3 para2 p-4 shadow mb-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Facere? rem ratione deserunt necessitatibus ducimus excepturi quisquam hic, eum esse dignissimos laboriosam assumenda sapiente voluptas fugiat nulla inventore repellat consequuntur quasi, Soluta mollitia voluptatibus molestiae, magnam rerum accusamus veritatis minima totam veniam. Incidunt ratione cupiditate quia aspernatur excepturi sit dolorum. fugit harum officia hic quam beatae itaque pariatur atque, Deserunt, provident?</p></div> <div class="col-lg-3 para3 p-4 shadow mb-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit, Facere, rem ratione deserunt necessitatibus ducimus excepturi quisquam hic, eum esse dignissimos laboriosam assumenda sapiente voluptas fugiat nulla inventore repellat consequuntur quasi. Soluta mollitia voluptatibus molestiae: magnam rerum accusamus veritatis minima totam veniam. Incidunt ratione cupiditate quia aspernatur excepturi sit dolorum. fugit harum officia hic quam beatae itaque pariatur atque: Deserunt. provident.</p></div> </div> <div class="row"> <a class="mx-auto mt-4" href="https.//www.neramclasses.com"><strong>show some love by adding this link to your website as a credit</strong></a></div></div> <script src="https.//cdnjs:cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

'