배경 이미지 센터를 기준으로 연결된 이미지 만들기

죄송합니다. 바보 같은 질문이긴하지만 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>

출처

2015-02-04 Mo GaGarnsey

데모는 여러분이하려는 일을 정확히 알지 못하기 때문에 큰 도움이 될 것입니다. –

혼란을 드려 죄송합니다. 여기에 내가하려고하는 것에 대한 데모가 있습니다 : http://pophatesfags.org/404two.html 기본적으로 나는 (텍스트 상자 위에) Wally의 작은 이미지를 만들 것입니다. 사용자가 페이지를 다시 가져 오게하십시오. 미리 이미지를로드하는 시간이 오래 걸리므로 죄송합니다. –

나는 이것이 내가 생각하는 것입니다.

페이지의 데드 센터 위치를 지정하고 왼쪽으로 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>

주이 항상 중심 첫번째하지만 50 픽셀 값은, 그 자체로 반응하지 ... 당신이 백분율로 할 수 있습니다되는 것에 응답 가치.

출처

2015-02-04 13:00:01

그것은 나에게 효과가 있지만 여전히 문제가있는 것처럼 보입니다! 버튼이 화면의 왼쪽 상단 구석에 나타납니다. 어떤 아이디어? http://pophatesfags.org/404two.html –

데모 페이지의 링크 '버튼'에 위의 코드와 같이 위치가 연결되어 있지 않은 것으로 보입니다. –

분명히 ... 왜 나타나지 않는지 확실하지 않습니다. 메인 코드를 전체 코드로 업데이트했습니다. –

배경 이미지 센터를 기준으로 연결된 이미지 만들기

답변

관련 문제