如何在图像的一角添加一个按钮“on”图像？

问题描述：

我希望把按键顶部的图像在三个地方如何在图像的一角添加一个按钮“on”图像？

左下角的图像的图像
中心图像的
右下角。（可选）....

如何将这些按钮放置在图像的顶部。

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

答

这有什么好做的jQuery或jQuery Mobile的真。可以用简单的HTML和CSS完成。看到这个捣鼓上午例如在我会怎么做：http://jsfiddle.net/rHaPH/22/

它们移动到图像

工作如约您可以添加尽可能多的按钮按钮显示在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）。

在这种情况下也按钮显示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

如何在图像的一角添加一个按钮“on”图像？

相关推荐