抱歉，如果这是一个愚蠢的问题，但我在尝试制作 404 错误页面时遇到了问题。
基本上，我已将其设置为带有大背景图片的“Where's Wally”样式页面。我正在尝试创建一个透明按钮来单击它将使用户返回到他们刚刚访问的页面，但我需要它相对于页面中心，因为我试图确保它适用于所有页面屏幕。
这是我目前的代码:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('http://www.website.org/404.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
p.pos_fixed {
position: center;
position:relative;left:-50px
</style>
</head>
<body>
<p class="pos_fixed"><a href='javascript:history.back()’><img src=‘http://www.website.org/button.png’></a></p>
</body>
</html>
谁能找到一种方法来做到这一点？如果我缺少更好的方法，我也非常愿意接受建议。
提前致谢!
更新:新代码。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('http://www.pophatesfags.org/404two.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: -50px;
padding: 1em;
border: 50px solid red;
}
</style>
</head>
<body>
<a class="button" href="javascript:history.back()">Link Here</a>
</body>
</html>
最佳答案
我认为这就是您所追求的。
它将按钮定位到页面的死点，然后将其向左推 50px；
.button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-left: -50px;
padding: 1em;
border: 1px solid red;
}<a class="button" href="javascript:history.back()">Link Here</a>注意 这是响应式的，因为它总是首先居中，但是 50px 值本身并不是响应式的...您可能希望它是一个百分比也很有值(value)。
关于html - 使链接图像相对于背景图像中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28321857/