如何在圖像的一角添加一個按鈕「on」圖像？

我希望把按鍵頂部的圖像在三個地方如何在圖像的一角添加一個按鈕「on」圖像？

左下角的圖像的圖像
中心圖像的
右下角。（可選）....

如何將這些按鈕放置在圖像的頂部。

<img src="images/default_image.png" style="width:90%" id="mImage" />

來源

2012-07-27 user1425472

這有什麼好做的jQuery或jQuery Mobile的真。可以用簡單的HTML和CSS完成。看到這個搗鼓上午例如在我會怎麼做：http://jsfiddle.net/rHaPH/22/

來源

2012-07-27 09:21:32

它們移動到圖像

工作如約您可以添加儘可能多的按鈕按鈕顯示在immage的底部我的代碼 – user1425472 2012-07-27 09:48:49

但我用jQuery手機什麼是我做的 – user1425472 2012-07-27 10:24:36

這不是一個「得到免費的代碼」網站，這是問題和答案。我和@Dessus都已經演示瞭如何以您想要的方式將元素放置在圖像頂部。您應該嘗試將這些提示應用於您自己的問題並解決它（並在過程中學習一些內容），而不是要求我們爲您完成工作。：）祝你好運。 – 2012-07-27 10:39:37

試試這個：

<div id="div-1"> 
    <img src="../img/logo.png" style="width:90%" id="mImage"> 
    <div id="div-1a" data-role="fieldcontain"> 
    <a href="index.html" data-role="button" data-icon="delete">Delete</a> 
    </div> 
    <div id="div-1b" data-role="fieldcontain"> 
    <a href="index.html" data-role="button" data-icon="delete">Delete</a> 
    </div> 
</div>

與此：

#div-1 { 
position:relative; 
} 
#div-1a { 
position:absolute; 
bottom:0; 
left:0; 
} 
#div-1b { 
position:absolute; 
bottom:0; 
right:0; 
}

您可以複製到JS小提琴，也將努力使用JQMobile。確保包含JQM的css url，並確保在向JS小提琴中添加JQuery時勾選JQMobile。

更新：

你也應該提防JQMobile將注入span標籤到DOM，這將是你的按鈕在運行時。這意味着我提供的CSS概念上沒問題，但是選擇器需要指向這些span標籤（而不是使用div標籤的id）。

來源

2012-07-27 09:35:00 Dessus

在這種情況下也按鈕顯示ata底部的immage – user1425472 2012-07-27 09:47:53

是的，你可以交換頂部：0爲底部：0 – Dessus 2012-07-27 09:54:51

對不起沒有得到你..你會編輯代碼 – user1425472 2012-07-27 10:36:30

截至今天，用jQuery移動V1.3.2我已經實現，在以下方式：

<div data-role="page"> 
    <div data-role="content"> 
     <div id="wrapper"> 
     <div id="button"> 
      <a href="#" data-role="button">Button</a> 
     </div> 
     <img src="i.jpg"> 
     </div> 
    </div> 
</div>

而且與後續的CSS：

#wrapper{ position:relative; } 
#button{ position:absolute; top: 10px; left:0px; z-index:10; } 
img{max-width:100%; }

有些款式可能並不需要什麼你想要的，但我只是從我自己的代碼中獲取代碼示例。

包裝div是相對定位的，因此其內容可以絕對定位。

按鈕div中的z-index是爲了確保它位於圖像的頂部。

根據需要，改變它的CSS屬性上，左，右按鍵在的jsfiddle它的工作原理，但在我的代碼在jsFiddle

來源

2013-09-20 11:39:04 spuas

如何在圖像的一角添加一個按鈕「on」圖像？

回答

相關問題