如何將影像以圓圈為中心？然后圓圈應該位于圖片的后面，并且只是將其框起來。
HTML
<div>
<div class="circle"></div>
<img src="../../assets/img/img.png" alt="" class="showslide">
</div>
CSS
.circle {
margin-top: 5%;
padding-top: 5%;
border: 4px solid #fff;
border-radius: 50%;
z-index: -1;
}
.showslide {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
}
uj5u.com熱心網友回復：
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: "Montserrat", sans-serif;
color: #262e2e;
box-sizing: border-box;
margin: 0;
background: #f5f8fa;
padding: 40px 0px;
}
.image-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #dddddd;
} <h4>Center Image</h4>
<div class="image-container">
<img
src="https://image.shutterstock.com/image-photo/kiev-ukraine-march-31-2015-260nw-275940803.jpg"
width="100"
/>
</div>看看你是否需要這個然后投票..！！
uj5u.com熱心網友回復：
您是否需要將圓 div 保留為影像的兄弟姐妹？因為如果您將影像放在圓形 div 中，則您的代碼已經在運行：
.circle {
margin-top: 5%;
padding-top: 5%;
border: 4px solid #000;
border-radius: 50%;
}
.showslide {
width: 80%;
display: block;
margin-left: auto;
margin-right: auto;
}<div class="circle">
<img src="https://cdn.iconscout.com/icon/free/png-512/account-avatar-profile-human-man-user-30448.png" alt="" class="showslide">
</div>我已經洗掉了 z-index（在這種情況下不需要）并將邊框顏色更改為黑色。
uj5u.com熱心網友回復：
不太確定您要在這里完成什么，但據我所知，您試圖使框架無法點擊。首先，您不能將框架保留在圖片后面，因為這樣影像就會出現在它的前面并將其隱藏起來。
pointer-events: none;
為框架設定這個，它應該很好。
uj5u.com熱心網友回復：
如何將影像以圓圈為中心？
一種方法是將兩個 CSS 屬性應用于<img>：
- 一種
border - 一個
outline
作業示例：
.my-image {
width: 144px;
height: 144px;
border: 18px solid rgb(255, 255, 255);
border-radius: 50%;
outline: 1px solid rgb(191, 191, 191);
}<img class="my-image" src="https://picsum.photos/132/132" alt="My Picture">轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/317301.html