将 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
添加到 image 和 button 元素。通过这种方式,您将能够根据其父元素 <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>
我在将元素放置在背景图像之上时遇到了一个烦人的问题。假设我们有一个 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
添加到 image 和 button 元素。通过这种方式,您将能够根据其父元素 <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>