我試圖讓 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/[email protected]/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> [email protected]</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> [email protected]</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> [email protected]</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>
uj5u.com熱心網友回復：
我在類中添加了一個影像，.icon您可以添加您的 svg。
基本上你需要給父類 .icon aposition:relative和你的 svg （孩子）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/[email protected]/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>
[email protected]</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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459430.html
上一篇：使用物件反應SVG組件
下一篇：如何創建ReactSVG組件？