如何將圖標放置在圖片的右上角

目標：
無論圖片的大小與響應式設計和最大尺寸有關，此擴展圖標應位於圖片的右上角。如何將圖標放置在圖片的右上角

問題：
我試過這麼解決它，但不幸的是我失敗了。

信息：
*請也*我使用的引導V3

謝謝考慮到響應式設計
！

.expand-position-for-picture { 
 
    border-radius: 22px; 
 
    color: black; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    padding: 12px 13px 10px 14px; 
 
    text-shadow: 0 0 2px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .2); 
 
    -webkit-transition: background .3s; 
 
    transition: background .3s; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.css" rel="stylesheet" /> 
 

 

 
<a href="http://www.partycity.com/images/products/en_us/gateways/candy-2015/candy-by-type/candy-by-type-lollipops.jpg" class="frame img-responsive" title=""> 
 
    <img src="http://www.partycity.com/images/products/en_us/gateways/candy-2015/candy-by-type/candy-by-type-lollipops.jpg" class="frame img-responsive"> 
 
    <div class="expand-position-for-picture"><span class="glyphicon glyphicon-resize-full"></span> 
 
    </div> 
 
</a> 
 

 

 

 

 

 
<a href="http://cdn.playbuzz.com/cdn/4805d33e-a884-4884-b908-7747387bf366/d559cb5e-ca7f-41ae-8827-91d6ef82866b.jpg" class="frame img-responsive" title=""> 
 
    <img src="http://cdn.playbuzz.com/cdn/4805d33e-a884-4884-b908-7747387bf366/d559cb5e-ca7f-41ae-8827-91d6ef82866b.jpg" class="frame img-responsive"> 
 
    <div class="expand-position-for-picture"><span class="glyphicon glyphicon-resize-full"></span> 
 
    </div> 
 
</a> 
 

 

 
http://cdn.playbuzz.com/cdn/4805d33e-a884-4884-b908-7747387bf366/d559cb5e-ca7f-41ae-8827-91d6ef82866b.jpg 
 

 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

來源

2017-01-27 What' sUP

因爲你的圖標是絕對位置，頂部和右側是相對於它的偏移父母。您是否試過不設置頂部和右側，而是使用負左側邊距將圖標拉回到圖片上。 –

右上角的圖像在3中使用了嗎？ –

這樣的事情。

a.frame { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.expand-position-for-picture { 
 
    border-radius: 22px; 
 
    color: black; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    padding: 12px 13px 10px 14px; 
 
    text-shadow: 0 0 2px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .2); 
 
    -webkit-transition: background .3s; 
 
    transition: background .3s; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<a href="http://www.partycity.com/images/products/en_us/gateways/candy-2015/candy-by-type/candy-by-type-lollipops.jpg" class="frame img-responsive" title=""> 
 
    <img src="http://www.partycity.com/images/products/en_us/gateways/candy-2015/candy-by-type/candy-by-type-lollipops.jpg" class="frame img-responsive"> 
 
    <div class="expand-position-for-picture"><span class="glyphicon glyphicon-resize-full"></span> 
 
    </div> 
 
</a> 
 
<a href="http://cdn.playbuzz.com/cdn/4805d33e-a884-4884-b908-7747387bf366/d559cb5e-ca7f-41ae-8827-91d6ef82866b.jpg" class="frame img-responsive" title=""> 
 
    <img src="http://cdn.playbuzz.com/cdn/4805d33e-a884-4884-b908-7747387bf366/d559cb5e-ca7f-41ae-8827-91d6ef82866b.jpg" class="frame img-responsive"> 
 
    <div class="expand-position-for-picture"><span class="glyphicon glyphicon-resize-full"></span> 
 
    </div> 
 
</a>

來源

2017-01-27 08:55:04

感謝您的幫助！ –

如何將圖標放置在圖片的右上角

回答

相關問題