Question

很抱歉，如果这是一个愚蠢的问题，但我正在尝试制作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>

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>

注意这是响应式的，因为它始终以优先为中心，但50px值本身并不响应......您可能希望这是一个百分比价值也是如此。

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

1 个答案: