时间戳

首页 > 解决方案 > 在包裹 div 的边框之间添加图标/img

css - 在包裹 div 的边框之间添加图标/img

问题描述

我正在尝试实现如下图所示的结果。我已经为卡片完成了围绕 div 的边框，但我不知道如何在顶部边框上放置一个图标或 img 并且看起来也被打断了。 在此处输入图像描述

我正在使用的 Bootstrap 4 卡的 Html 代码。

  <div class="container pt-5 pb-5">
<div class="row">
  <div class="col">
    <div class="card card-thin-v2 w-100 bg-dark-green">
      <div class="card-body card-thin-body-v2">
        
        <h2 class="card-title"><img src="../assets/main/src/img/present-icon.png" alt="" srcset="">text<span class="orange-text">text</h2>
        <p class="card-text">text</p>
        <a href="#" class="btn btn-green">buttonr&nbsp; <i class="icon-arrow-right"></i></a>
      </div>
    </div>
  </div>
</div>

CSS代码

    
.card-thin-body-v2 {
    border: 1px dotted rgba($color: $white, $alpha: .15);
    width: 74rem;
    padding: 1rem .3rem 1rem 1rem;
    margin: 15px 0px 15px 15px;
    background-image: url('../../img/cartu-book.svg');
    >h2 {
        color: $white;
        font-family: "adobe-caslon-pro";
        font-size: 40px;
        font-style: normal;
        font-weight: 600;
        line-height: 48px;
        letter-spacing: 0em;
        margin-left: 1rem;
        >img {
            height: 50.66937255859375px;
            width: 53.306663513183594px;
            border-radius: 0px;
            margin: 20px 5px -10px 0px;
        }
    }
    >p {
        font-family: "adobe-

<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container pt-5 pb-5">
    <div class="row">
      <div class="col">
        <div class="card card-thin-v2 w-100 bg-dark-green">
          <div class="card-body card-thin-body-v2">
            
            <h2 class="card-title"><img src="../assets/main/src/img/present-icon.png" alt="" srcset="">text<span class="orange-text">text</h2>
            <p class="card-text">text</p>
            <a href="#" class="btn btn-green">buttonr&nbsp; <i class="icon-arrow-right"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>

任何帮助深表感谢。谢谢！

标签： cssbootstrap-4

解决方案

干得好...

制作两个div：

  • 一无边框（外）
  • 一个虚线边框（内部）

要向上移动图像，请设置margin-top: -2%;为图像。此外，设置padding-left: 2%;和padding-right: 2%;中断边框并将相同的背景颜色设置为外部 div 和图像（例如background-color: gray;），以使图像实际上中断虚线边框。

#box {
  position: absolute;
  width: 90%;
  height: 90%;
  border-radius: 2vw;
  background-color: gray;
  margin-top: 2.5%;
}

#dashed {
  width: 90%;
  height: 90%;
  border-width: 5px;
  border-style: dashed;
  border-radius: 2vw;
}

#image {
  width: 10%;
  margin-top: -2%;
  padding-left: 2%;
  padding-right: 2%;
  background-color: gray;
}
<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
  <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl' crossorigin='anonymous'>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
  <link rel='stylesheet' type='text/css' href='style.css'>
  <script src='javascript.js'></script>
</head>

<body>

  <div class='container-fluid d-flex justify-content-center'>
    <div class='d-flex align-items-center justify-content-center' id='box'>
      <div class='d-flex align-items-start justify-content-center' id='dashed'>
        <img id='image' src='https://animals.sandiegozoo.org/sites/default/files/2016-11/animals_hero_giraffe_1_0.jpg'>
      </div>
    </div>
  </div>

</body>

</html>

推荐阅读