在圖片上添加圖片html+css
[英]adding a picture over a picture html+css
問題描述
我想為我創建的 map 添加一個引腳。 它應該在 map 上定位某個特定點，以便當網站顯示在不同尺寸的屏幕上時，該引腳和 map position 可以響應屏幕尺寸的變化。 當圖釘懸停時，它會顯示一些地址。 我找到了這個下拉菜單並編輯了它的代碼以獲得這個引腳 hover 效果。 （但我不知道從中刪除此列表標簽，但這樣可以正常工作）但我不明白如何將引腳添加到 map。 我嘗試使用margin-left和margin-top但是當我嘗試響應式設計模式時它不起作用（它改變了它的位置）
.map { border-radius: 2em; width: 40%; }.pin { width: 5%; } ul { list-style: none; margin: 0; padding-left: 0; } li { color: #fff; display: block; float: left; padding: 1rem; position: relative; text-decoration: none; transition-duration: 0.5s; } li { color: #fff; } li:hover { cursor: pointer; } ul li ul { border-radius: 2rem; background: orange; visibility: hidden; opacity: 0; min-width: 5rem; position: absolute; margin-top: 0rem; left: 2.5rem; display: none; } ul li:hover > ul{ visibility: visible; opacity: 1; display: inline; } <.DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="1:css"/> </head> <body> <ul> <li><img src="https.//i.imgur.com/pTCiMq9:png" class="pin"> <ul> <li>address</li> </ul> </li> </ul> <img src="https.//i.imgur.com/TtjBzLY.png" class="map"> </body> </html>
3 個解決方案
解決方案1
2 已采納 2020-12-07 20:19:26
你可以讓你的 map 有一個相對的 position 並且你的 pin 有一個絕對的 position，然后 Z4757FE07FD4962A36BE0EAZ 使用%從top和left . 我還建議使用 div 布局來實現這一點。 請看看我在這里做了什么：
.map { border-radius: 2em; width: 60%; position: relative; min-width: 5rem; }.pin { width: 25%; position: absolute; top: 10%; left: 20%; }.address { display: none; color: #fff; float: left; padding: 10%; margin: 10%; text-decoration: none; transition-duration: 0.5s; }.pin:hover.address { border-radius: 2rem; background: orange; min-width: 5rem; position: absolute; margin-top: 0rem; left: 2.5rem; display: block; }
<.DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="1:css"/> </head> <body> <div class="map"> <img src="https.//i.imgur.com/TtjBzLY:png" class="map"> <div class="pin"><img src="https.//i.imgur.com/pTCiMq9.png" class="pin"> <div class="address">address</div> </div> </div> </body> </html>
解決方案2
1 2020-12-07 20:18:51
I would put both the map image and the pin image into the same container element (a div ), apply position: relative to that div, then apply position: absolute to the pin img and define its position by using the left and top parameters with百分比值。 使 map 圖像完全填充父 div（或反過來，將div的大小定義為與 map 圖像一樣寬和高）。 這樣，div 將成為引腳的 position 錨。
這樣，100% 將是 map 圖像的全寬（對於left設置）或高度（對於top ）。
解決方案3
1 2020-12-07 20:19:35
在這里，我將兩個圖像的position absolute 。 另外，我在.pin后面給了.map一個z-index 。 根據需要調整銷。
.map { border-radius: 2em; width: 40%; position: absolute; z-index: -1; }.pin { position: absolute; z-index: 0; width: 100%; padding-left: 200px; padding-top: 50px; } ul { list-style: none; margin: 0; padding-left: 0; } li { color: #fff; display: block; float: left; padding: 1rem; position: relative; text-decoration: none; transition-duration: 0.5s; } li { color: #fff; } li:hover { cursor: pointer; } ul li ul { border-radius: 2rem; background: orange; visibility: hidden; opacity: 0; min-width: 5rem; position: absolute; margin-top: 0rem; left: 2.5rem; display: none; } ul li:hover > ul{ visibility: visible; opacity: 1; display: inline; }
<.DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="1:css"/> </head> <body> <ul> <li><img src="https.//i.imgur.com/pTCiMq9:png" class="pin"> <ul> <li>address</li> </ul> </li> </ul> <img src="https.//i.imgur.com/TtjBzLY.png" class="map"> </body> </html>
如果您有任何問題，請告訴我。
HTML + CSS多種樣式，圖片上的文字
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.