Question

我有一个令人讨厌的问题是将元素放在背景图像的顶部。假设我们有一个html：

<html>
<head>
</head>
<body style = "margin: 0 auto;">
    <div style="background:url('image.png'); background-size:cover;">
        <button>Button </button>
    </div>
</body>
</html>

按钮应放在原始图像的left: 50px; top: 100px;处，但由于设备屏幕（桌面镶边或ios safari）发生变化，而background-size: cover;属性，图像实际上是缩放的，因此按钮不会出现在正确的位置。我尝试了另一种方式：

<html>
<head>
</head>
<body style = "margin: 0 auto;">
    <div style="width:100%;">
        <img src="image.png" width="100%" />
        <button style="top: -100;z-index: 5;">Button </button>
    </div>
</body>
</html>

这样页面可能会滚动，因为图像可能超出屏幕高度，一旦我将按钮定位到正确的位置，并更改为另一个设备分辨率，位置再次被更改。

我也试过javascript听resize事件来绝对定位按钮，桌面和ios屏幕之间仍然有明显区别。

我怎么做到的？提前谢谢！

编辑：如果图像由于屏幕分辨率而缩放，我希望按钮的比例也相同。如果没有复杂的javascript，找到一种方法会很棒。

Answer 1

将CSS position absolute添加到图片和按钮元素。通过这种方式，您可以根据其父元素<div>设置其位置。

http://jsbin.com/mevuxizuzu/1/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div style="width:100%;">
        <img style="position:absolute" src="image.png" width="100%" />
        <button style="position:absolute; left: 50px; top: 100px;z-index: 5;">Button </button>
    </div>
</body>
</html>

Answer 2

你可以使用position：absolute;对于你的按钮并设置正确的位置，其顶部和左侧位置为％，因为你的宽度和高度是基于％而不是像素。

Answer 3

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<div style="width:100%;">
        <img style="position:absolute" src="image.png" width="100%" />
        <button style="position:absolute; left: 15%; top: 10%;z-index: 5;">Button </button>
    </div>
</body>
</html>

Answer 4

如果您希望按钮大小随页面比例而变化，则必须在％unit中添加宽度和高度样式。因为像素是不同设备上的修复单元，但％取决于设备分辨率。最后，您可以为div样式添加min-width和min-height或max-width和max-height，以便对其他设备进行良好控制。祝你好运。

Answer 5

尝试以下使用按钮相对位置的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    button {
      position: relative;
      left: 20px;
      top:100px;
    }
    .bd{
      background-image: url('http://lorempixel.com/650/1000/sports/1/');
      background-size: cover;
      height: 1000px;
      width: 650px;

    }
  </style>
</head>
<body>
<div class="bd" style="width:100%;">
        <img style="position:absolute" src="" width="100%" />

        <button>Button </button>
    </div>
</body>
</html>

结帐本次演示：http://jsbin.com/pemafigafa/3/

修复div / button / link到背景图像

5 个答案: