我有一個這樣的 div：
現在我需要從這個形狀中洗掉一部分圓圈，如下所示：
因此最終的形狀看起來像這樣：
所以我決定把影像作為我 div 的背景。
<div class="col-4 customBack">
<div class="mainInfo">
<div class="circle2">
<img src="https://sitename.com/images/image.png">
</div>
<div class="paraDivRight2">
<h6 style="margin-top:5px;"><strong>Lorem Ipsum Dolor Simit</strong></h6>
<hr style="margin-top:-5px;">
<p style="margin-top:-10px;">012-3456789</p>
<p style="padding-top:5px;">[email protected]</p>
</div>
</div>
</div>
這里是樣式：
.mainInfo{
background-color: #fff;
border: .01rem round #e0e1ed;
border-radius: 20px;
color: #585CA1;
width:100%;
height:5em;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.75);
margin-top: 3em;
display: flex;
align-items: center;
justify-content: center;
}
.customBack{
background-image: url("/img/shadow3.png") !important;
}
.circle2 {
position: relative;
left:-60%;
width: 9em;
height: 9em;
background: #fff;
border-radius: 50%;
box-shadow: 0px 0px 17px -5px rgba(0,0,0,0.65);
}
.circle2 img {
position: absolute;
max-width: 85%;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
}
.paraDivRight2 {
position: absolute;
display: inline-block;
padding: 10px;
color:black;
top:0px !important;
padding-top:50px !important;
right: 20px;
text-align: right;
padding-right:50px !important;
}
.paraDivRight2 p {
line-height: 1em;
font-size: 10pt;
margin: 0;
letter-spacing: 1px;
}
正如你所看到的，我已經把背景放在了.customBack課堂上，但現在的結果是這樣的：
所以問題是，我怎樣才能正確放置這個背景影像，它是 ( shadow3.png) 作為這個mainInfodiv 的背景影像，所以需要洗掉的圓形的一側不會出現......
我真的被困在這個問題上，所以請幫助我...
uj5u.com熱心網友回復：
- 在包裝元素上使用 CSS
filter: drop-shadow()MDN 檔案。 - 修復您的類命名以使用更友好的約定
- 使用 CSS flex 更簡單地對齊元素
- 停止使用行內 HTML
style屬性
/* Quick Reset */
* {
margin: 0;
box-sizing: border-box;
}
.custom {
filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.4));
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.custom-image {
width: 9em;
height: 9em;
background: #fff;
border-radius: 50%;
padding: 1em;
}
.custom-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.custom-content {
position: relative;
background: #fff;
padding: 1em;
text-align: right;
border-radius: 0 1em 1em 0;
padding-left: 2em;
left: -1em;
}
.custom-content h4 {
border-bottom: 1px solid #ddd;
}<div class="custom">
<div class="custom-image">
<img src="https://i.stack.imgur.com/qCWYU.jpg?s=256&g=1">
</div>
<div class="custom-content">
<h4>Lorem Ipsum Dolor Simit</h4>
<p>012-3456789</p>
<p>[email protected]</p>
</div>
</div>uj5u.com熱心網友回復：
我對此不是 100% 確定，但它在過去對我有用，嘗試使positiondiv的 屬性相對并使其絕對影像，然后正確調整大小。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392779.html
標籤：html css 推特引导 bootstrap-4
上一篇：如何在HTML中呼叫此函式？