将 SVG 放在图像的右下角 Bootstrap

Question

我正在尝试让 SVG 进入 bootstrap 卡片中图像的右下角。我尝试了类似这样的解决方案：picture on the bottom right cornor of image but using the CSS for the icon makes my SVG disappear completely. I did not include the SVG tags in my code snippet because it was very long. But the full SVG I am using can be found here: https://communityloaves.org/wp-content/uploads/2022/03/breadherobadge.svg

使用包含的代码，卡片看起来像这样：

我希望他们将 SVG 放在全绿色图像的右下角。就像在第二张图片中一样。

.image{
  height:100%;
  position:relative;
  background-color:green;
  background-size: cover;
  background-image: url(https://communityloaves.org/wp-content/uploads/2021/05/Avatar-2-450x450.jpg);
}

.image .icon {
  position:absolute;
  bottom:0px;
  right:0px;
}

p.dash-intro.nav-btns {
    padding-top: 3rem;
}
   .col-md-4.padding-1 {
      padding-left: 5px;
      padding-right: 5px;
   }
   .ann-text {
   margin-bottom: 0px !important;
   }
   .ann-img {
   max-height: 40rem;
   }
   .dash-intro {
   color: black;
   font-size: 18px;
   margin-top: 35px;
   }
   .member-img {
   max-height: 7rem;
   margin-bottom: 6px;
   padding-left: 15px;
   }
   p.card-text {
   font-size: 11px;
   padding: 9px 15px 9px 0px;
   }
   .special {
   color: black;
   font-size: 19px;
   font-weight: bold;
   }
   .card-header {
   padding: 0.75rem 1.25rem;
   margin-bottom: 0;
   background-color: #D4E1D4;
   border-bottom: 1px solid rgba(0,0,0,0.125);
   }
   .hide {
   display: none;
   }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
   <br>
   <hr>
   <div class="row mt-3">
      <div class="col-md-12">
         <h4 class="font-weight-bold mb-3" id="members">Hub Members</h4>
      </div>
   </div>
   <div class="row">
      <div class="col-md-4 padding-1">
         <div class="card border-success mb-5">
            <div class="row g-2">
               <div class="col-md-5 col-12 text-center padding-0">
                  <div class="image">
                     <div class="icon"><svg goes here. I didnt inlcude the full svg because it was too long> </div>
                  </div>
               </div>
               <div class="col-md-7 col-12 padding-0">
                  <p class="card-text">
                     <span class="font-weight-bold">Jane D <br></span> 
                     <span class="font-weight-bold">Member Since: </span> Apr  13, 2022 <br>
                     <span class="font-weight-bold">First Donation: </span> Feb  27, 2022 <br>
                     <span class="email-text"><span class="font-weight-bold"><i class="fa fa-envelope"></i></span>  janedoe@gmail.com</span>
                     <br><span class="font-weight-bold"><i class="fa fa-phone"></i></span>  555 555 555 (cell)                     <br><span class="font-weight-bold">Loaves to date:  </span>  5                  
                  </p>
               </div>
            </div>
         </div>
      </div>
      <div class="col-md-4 padding-1">
         <div class="card border-success mb-5">
            <div class="row g-2">
               <div class="col-md-5 col-12 text-center padding-0">
                  <div class="image" stlye="background-image: url();">
                     <div class="icon">><svg goes here. I didnt inlcude the full svg because it was too long></div>
                  </div>
               </div>
               <div class="col-md-7 col-12 padding-0">
                  <p class="card-text">
                     <span class="font-weight-bold">Jane D <br></span> 
                     <span class="font-weight-bold">Member Since: </span> Apr  13, 2022 <br>
                     <span class="font-weight-bold">First Donation: </span> Feb  27, 2022 <br>
                     <span class="email-text"><span class="font-weight-bold"><i class="fa fa-envelope"></i></span>  janedoe@gmail.com</span>
                     <br><span class="font-weight-bold"><i class="fa fa-phone"></i></span>  555 555 555 (cell)                     <br><span class="font-weight-bold">Loaves to date:  </span>  5                  
                  </p>
               </div>
            </div>
         </div>
      </div>
      <div class="col-md-4 padding-1">
         <div class="card border-success mb-5">
            <div class="row g-2">
               <div class="col-md-5 col-12 text-center padding-0">
                  <div class="image" stlye="background-image: url();">
                     <div class="icon">><svg goes here. I didnt inlcude the full svg because it was too long></div>
                  </div>
               </div>
               <div class="col-md-7 col-12 padding-0">
                  <p class="card-text">
                     <span class="font-weight-bold">Jane D <br></span> 
                     <span class="font-weight-bold">Member Since: </span> Apr  13, 2022 <br>
                     <span class="font-weight-bold">First Donation: </span> Feb  27, 2022 <br>
                     <span class="email-text"><span class="font-weight-bold"><i class="fa fa-envelope"></i></span>  janedoe@gmail.com</span>
                     <br><span class="font-weight-bold"><i class="fa fa-phone"></i></span>  555 555 555 (cell)                     <br><span class="font-weight-bold">Loaves to date:  </span>  5                  
                  </p>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Answer 1

我在里面添加了一张图片 .icon class 你可以添加你的 svg。

基本上你需要给 parent class .icon 一个 position:relative 和你的 svg (child) position:absolute 才能在里面玩与

在这种情况下需要的底部、左侧、右侧和顶部属性

bottom:0;
right: 0;

这是您的代码

*,
*::before,
*::after {
  box-sizing: border-box;
}

.image{
  height:100%;
  position:relative;
  background-color:green;
  background-size: cover;
}

.image .icon {
  position:relative;
  width: 100%;
  height: 100%;
}

.image .icon img{
  position: absolute;
  bottom:0;
  right: 0;
  border-radius: 100%;
  width: 80px;
}

p.dash-intro.nav-btns {
    padding-top: 3rem;
}
   .col-md-4.padding-1 {
      padding-left: 5px;
      padding-right: 5px;
   }
   .ann-text {
   margin-bottom: 0px !important;
   }
   .ann-img {
   max-height: 40rem;
   }
   .dash-intro {
   color: black;
   font-size: 18px;
   margin-top: 35px;
   }
   .member-img {
   max-height: 7rem;
   margin-bottom: 6px;
   padding-left: 15px;
   }
   p.card-text {
   font-size: 11px;
   padding: 9px 15px 9px 0px;
   }
   .special {
   color: black;
   font-size: 19px;
   font-weight: bold;
   }
   .card-header {
   padding: 0.75rem 1.25rem;
   margin-bottom: 0;
   background-color: #D4E1D4;
   border-bottom: 1px solid rgba(0,0,0,0.125);
   }
   .hide {
   display: none;
   }

<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />

<div class="container-fluid">
      <br />
      <hr />
      <div class="row mt-3">
        <div class="col-md-12">
          <h4 class="font-weight-bold mb-3" id="members">Hub Members</h4>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4 padding-1">
          <div class="card border-success mb-5">
            <div class="row g-2">
              <div class="col-md-5 col-12 text-center padding-0">
                <div class="image">
                  <div class="icon">
                    <img
                      src="https://source.unsplash.com/random/100x100"
                      alt=""
                    />
                  </div>
                </div>
              </div>
              <div class="col-md-7 col-12 padding-0">
                <p class="card-text">
                  <span class="font-weight-bold">Jane D <br /></span>
                  <span class="font-weight-bold">Member Since: </span> Apr 13,
                  2022 <br />
                  <span class="font-weight-bold">First Donation: </span> Feb 27,
                  2022 <br />
                  <span class="email-text"
                    ><span class="font-weight-bold"
                      ><i class="fa fa-envelope"></i
                    ></span>
                    janedoe@gmail.com</span
                  >
                  <br /><span class="font-weight-bold"
                    ><i class="fa fa-phone"></i
                  ></span>
                  555 555 555 (cell) <br /><span class="font-weight-bold"
                    >Loaves to date:
                  </span>
                  5
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

将 SVG 放在图像的右下角 Bootstrap

Place SVG in bottom right hand corner of image Bootstrap

html

css

svg

bootstrap-4

这是您的代码