響應地在背景圖像上顯示相同位置的浮動圖像

我有一個動態div顯示一些信息，我想將它們放在相對於頁面背景的確切位置。例如，我想說一個數字9讓我們說，在貓的眼睛上。在「完整」分辨率下，這可以正常工作，但將剩餘邊距與像素大小或甚至百分比綁定會導致此問題中斷。「眼睛」的代碼是這樣的：響應地在背景圖像上顯示相同位置的浮動圖像

.catEye { 
    position: absolute; 
    color: #DCDCDC; 
    font-size: 10px; 
    font-weight: bold; 
    font-family: "helvetica-neue-bold", helvetica, sans-serif; 
    width: 25px; 
    height: 25px; 
    margin-top: 100px; 
    margin-left: 68px; 
    border: 3px solid #000000; 
    border-radius: 100%; 
    background-color: #000000; 
}

這是一個顯示問題的plunkr。在較小的分辨率下，問題最爲明顯。當處於「全」分辨率時，「9」應該直接位於貓眼之上。

http://plnkr.co/edit/2uqIhBseRLo5A47JVI2F?p=preview

我使用基金會塊網格設置，5個項目每行。由於我擁有的圖像具有一定的尺寸，因此如果可能的話，這通常應該保持不變。

問題：有沒有辦法讓「9」總是直接放在眼睛上方，無論瀏覽器的分辨率如何？在我的實際工作中，它需要直接放在角落裏，所以運動非常引人注目。

澄清：經過思考，我基本上要求的是相對於圖像元素的定位，因爲無論它的大小/位置如何，只要「9」相對於它放置，它會工作。

來源

2015-05-28 Organiccat

交一些其他CSS – maioman

（'DIV類= 「imgCat」'中的至少一個）加入我的確切問題。 @maioman提供了一個演示鏈接來顯示問題，除了項目上的填充文本外，其實並沒有太多其他內容。無論分辨率如何，「9」都應位於眼睛的正上方。 – Organiccat

我想你這意味着有貓的background-size:cover，我不認爲這是可能的。

目前，relative位置設置在可以大於200px（它是圖像大小）的元素上，並且您在背景上設置了值爲center，以便它移動。貓眼總是住在同一個地方，但不是貓的形象。可以將relative設置爲max-width: 200px;。簡化演示如下。

JSFiddle Demo

.imgCat { 
 
    background: url("http://i.imgur.com/qpbY8VC.png"); 
 
    max-width: 200px; 
 
    height: 200px; 
 
    position: relative; 
 
} 
 
.catEye { 
 
    position: absolute; 
 
    left: 75px; 
 
    top: 95px; 
 
    width: 30px; 
 
    height: 30px; 
 
    display: block; 
 
    border: 2px solid orange; 
 
    border-radius: 50%; 
 
}

<div class="imgCat"> 
 
    <span class="catEye"></span> 
 
</div>

來源

2015-05-28 21:25:24 Stickers

背景圖片不是封面，實際的圖片在居中的背景圖片周圍有相當多的空間。 – Organiccat

你有最接近的答案，但我還需要一個額外的元素。爲了放置該元素，我首先使用catEye上的剩餘邊距50％將其居中。這將它放在圖像的中間。在這一點上，我現在總是有一個固定的距離，從中心到我要去的任何地方。使用「左」或「右」我現在可以根據需要從那裏定位它。如上所述，imgCat必須相對定位，以便catEye絕對定位在父元素之外運行。感謝那！還要注意的是，除了剩餘50％的餘量外，沒有其他％應該用於響應。 – Organiccat

首先事情，你可以使用left:和top:屬性來定位的絕對/相對IMG（而不是margin-left & margin-top）。

第二個取決於包含img如何調整大小我會設置left:和top:屬性與百分比值。

第三使用相對定位（相對於您的方案中的靜態父 - 相對）。

把這個在你的CSS，讓我知道，如果它想要的渲染

.imgCat { 
    background: url('http://i.imgur.com/qpbY8VC.png') center no-repeat; 
    height: 200px; 
} 

li { 
    padding: 10px; 
    border: 1px solid #000; 

} 

.catEye { 
    position: relative; 
    color: #DCDCDC; 
    font-size: 10px; 
    font-weight: bold; 
    font-family: "helvetica-neue-bold", helvetica, sans-serif; 
    width: 25px; 
    height: 25px; 
    top: 50%; 
    left: 35%; 
    border: 3px solid #000000; 
    border-radius: 100%; 
    background-color: #000000; 
}

BTW：其實貓IMG看起來不是很敏感...

來源

2015-05-28 20:52:11 maioman

響應地在背景圖像上顯示相同位置的浮動圖像

回答

相關問題