将 div/button/link 修复为背景图片

fix a div/button/link to a background image

我在将元素放置在背景图像之上时遇到了一个烦人的问题。假设我们有一个 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; 相对于原始图像的位置,但由于设备屏幕(桌面 chrome 或 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监听调整大小事件来绝对定位按钮,它在桌面和ios屏幕之间仍然有明显的区别。

我怎样才能做到?提前致谢!

编辑: 如果图像因屏幕分辨率而缩放,我希望按钮也按相同比例缩放。如果能找到一种不复杂的方法就好了 javascript.

将 CSS position absolute 添加到 imagebutton 元素。通过这种方式,您将能够根据其父元素 <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>

您可以使用position:absolute;为您的按钮设置顶部和左侧位置的正确位置,因为您的宽度和高度基于 % 而不是像素。

<!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>

如果你想让按钮的大小随着页面的缩放而变化,那么你必须添加以%为单位的宽度和高度样式。因为像素是不同设备上的固定单位,但 % 取决于设备分辨率。最后,您可以将 min-width 和 min-height 或 max-width 和 max-height 添加到您的 div 样式中,以便在其他设备上进行良好的控制。祝你好运。

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

<!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/