使链接图像相对于背景图像中心

Question

抱歉，如果这是一个愚蠢的问题，但我在尝试制作 404 错误页面时遇到了问题。

基本上，我已将其设置为带有大背景图片的“Wally 在哪里”风格的页面。我正在尝试创建一个透明按钮来单击它 return 用户到他们刚刚所在的页面，但我需要它相对于页面中心，因为我试图确保它将适用于所有屏幕。

这是我目前的代码：

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

Answer 1

我想这就是你想要的。

它将按钮定位到页面死点，然后将其向左推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>

注意这是响应式的，因为它始终居中 first 但是 50px 值本身不是响应式的...您可能也希望它是一个百分比值。

使链接图像相对于背景图像中心

Making Linked Image Relative to Background Image Center

html

css

position

image

center