將圖片置於一個圓圈中心

-1

我想在圖片周圍添加邊框，但無論我做什麼，我都無法將圖片放置在圓圈的中心。如果你能幫助解決這個問題，我將非常感激。這是我的CodePen。將圖片置於一個圓圈中心

.firstcell::after { 
 
    border: 2px solid rgba(138, 223, 199, 0.74); 
 
    border-radius: 500%; 
 
    content: ""; 
 
    position: absolute; 
 
    left: 2px; 
 
    height: 32px; 
 
    width: 32px; 
 
} 
 

 
.firstcell.status_1 { 
 
    background-repeat: no-repeat; 
 
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAXZJREFUSA1jYBgFoyFAaQgwggz4uzDwPzkG/f7/X4UjYcNdfHqZ8ElSQ47mFlAUROGS/Qe+MXLwwHzKyMhwZ6uLRBSQDw9yinzwk4ldA2jWGUZGxsr///9V/2dgNPXa9TIdZiGIpsgCiEGMt7a6iO/Z7ia1i/Hv33BGpv/NTpsfS8MsYYExyKWBYczlvOeJMEj/D4Z/Dzj+MU7n5GCdBuT6g8Qo9wEjYwsHA+sbGGZgYqplYGT089750oo6FoBMwQL+M//lAwlj8cF/UAr4jkUPfqH//7+hKPjPwA3io1gATAlv2BI3vmGOX885Y++99Sga8HCOFfju3OoqwXU4230JMIH+BSllZGSeD6LBkfzvP0MPiJO54ALn33//U4HM3OxFFyenOSmBxUFy2ADnvx9/nz24z/v+yqksoLzxp5sXzn64c7mNX0WHE2jRD2x6mIGCP4EYFEwo6RmbYiSxO1A9F5DEcDJBlqjjlMUtYYJbalRmIEMAAKGecc1FS0saAAAAAElFTkSuQmCC'); 
 
}

<div class="container-fluid"> 
 
    <h1>Some Title</h1> 
 
    <table class="table table-hover table-striped"> 
 
    <thead> 
 
     <tr> 
 
     <th>Status</th> 
 
     <th>Name</th> 
 
     <th>Title</th> 
 
     <th>Link</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td class="firstcell status_1"></td> 
 
     <td>Name1</td> 
 
     <td>Title1</td> 
 
     <td><a href="#">Link1</a></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="firstcell status_1"></td> 
 
     <td>Name2</td> 
 
     <td>Title2</td> 
 
     <td><a href="#">Link2</a></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

來源

2017-03-04 Meanteacher

你爲什麼不放在'.firstcell :: after'背景圖像？ – user500665

這幾乎是**從來沒有**在'table'中使用'position：absolute;'的好主意。 – connexo

@ user500665我將擁有多個狀態值。因此，我想爲所有'firstcell'類添加圓圈並根據「狀態」添加不同的圖像。 – Meanteacher

從您的僞元素position: absolute;，加display: block;，然後申請一個background-position到background-image。

.firstcell::after { 
 
    border: 2px solid rgba(138, 223, 199, 0.74); 
 
    border-radius: 500%; 
 
    content: ""; 
 
    height: 32px; 
 
    width: 32px; 
 
    display: block; 
 
} 
 

 
.firstcell.status_1 { 
 
    background-repeat: no-repeat; 
 
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAXZJREFUSA1jYBgFoyFAaQgwggz4uzDwPzkG/f7/X4UjYcNdfHqZ8ElSQ47mFlAUROGS/Qe+MXLwwHzKyMhwZ6uLRBSQDw9yinzwk4ldA2jWGUZGxsr///9V/2dgNPXa9TIdZiGIpsgCiEGMt7a6iO/Z7ia1i/Hv33BGpv/NTpsfS8MsYYExyKWBYczlvOeJMEj/D4Z/Dzj+MU7n5GCdBuT6g8Qo9wEjYwsHA+sbGGZgYqplYGT089750oo6FoBMwQL+M//lAwlj8cF/UAr4jkUPfqH//7+hKPjPwA3io1gATAlv2BI3vmGOX885Y++99Sga8HCOFfju3OoqwXU4230JMIH+BSllZGSeD6LBkfzvP0MPiJO54ALn33//U4HM3OxFFyenOSmBxUFy2ADnvx9/nz24z/v+yqksoLzxp5sXzn64c7mNX0WHE2jRD2x6mIGCP4EYFEwo6RmbYiSxO1A9F5DEcDJBlqjjlMUtYYJbalRmIEMAAKGecc1FS0saAAAAAElFTkSuQmCC'); 
 
    background-position: 40% 40%; 
 
}

<div class="container-fluid"> 
 
    <h1>Some Title</h1> 
 
    <table class="table table-hover table-striped"> 
 
    <thead> 
 
     <tr> 
 
     <th>Status</th> 
 
     <th>Name</th> 
 
     <th>Title</th> 
 
     <th>Link</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td class="firstcell status_1"></td> 
 
     <td>Name1</td> 
 
     <td>Title1</td> 
 
     <td><a href="#">Link1</a></td> 
 
     </tr> 
 
     <tr> 
 
     <td class="firstcell status_1"></td> 
 
     <td>Name2</td> 
 
     <td>Title2</td> 
 
     <td><a href="#">Link2</a></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

來源

2017-03-04 21:16:41 connexo

-1

在這裏你去！避免使用CSS鏈接的圖像（僅適用於靜態背景）。如果您想在圖像周圍劃一條線，只需添加邊框屬性即可。

img { 
 
border-radius:50%; 
 
background-color:red; 
 
border: 10px solid black; 
 
}

<img src="https://lh5.ggpht.com/tq3WqEUxtRyBn-d_0t3j6WKNHuJDrmLq-FE3GAYrsAMQFIaS7FIgRLfzzql2SvfvLqto=w300">

來源

2017-03-04 21:08:41

我想畫一個2px邊框的空圈。看看我的樣品。這不是我想要實現的。 – Meanteacher

配合，正如我所說的，只需添加邊框屬性並避免使用CSS鏈接圖像。我們不會爲你編寫代碼，只是告訴你如何做到這一點。 –

將圖片置於一個圓圈中心

回答

相關問題