Создание связанного изображения относительно фонового изображения Центр

Извините, если это глупый вопрос, но у меня проблемы с 404 страницей ошибок, которую я пытаюсь сделать.Создание связанного изображения относительно фонового изображения Центр

В принципе, я установил его как страницу стиля «Где 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>

источник

2015-02-04 Mo GaGarnsey

Демонстрация была бы очень полезной, поскольку не ясно, что именно вы пытаетесь сделать. –

Извините за путаницу. Вот демонстрация того, что я пытаюсь сделать: http://pophatesfags.org/404two.html В основном я просто пытаюсь сделать маленький образ Уолли (над текстовым полем) гиперссылкой, которая будет верните пользователю страницу. Извините заранее за длительное время загрузки изображения, работая над этим. –

Я думаю, что это то, что вам нужно.

Он позиционирует кнопку мертвой точки страницы и затем выталкивает ее влево 50 пикселей;

.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, само по себе, не отвечает ... Вы могли бы хотеть, что бы процент значение тоже.

источник

2015-02-04 13:00:01

Кажется, что это должно работать для меня, но все еще есть проблема! Кнопка просто появляется в верхнем левом углу экрана странно. Есть идеи? http://pophatesfags.org/404two.html –

Ссылка «кнопка» на вашей демонстрационной странице, похоже, не имеет никакого позиционирования, как указано выше. –

Это определенно ... не уверен, почему он не появляется? Я обновил основную запись своим полным кодом. –

Создание связанного изображения относительно фонового изображения Центр

ответ

Смежные вопросы