HTML 버튼은 항상 한 곳에 있습니다

사람의 머리에 배경 이미지가있는 HTML 코드가 있습니다. 사람의 눈에 HTML 버튼이 있습니다. 브라우저 창 크기가 조절되면 버튼이 항상 눈에 띄기를 원합니다. 이것이 내 코드입니다. 나를 도와 주셔서 감사합니다.HTML 버튼은 항상 한 곳에 있습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Post</title> 
</head> 

<body> 
<div> 
<table cellspacing="0" cellpadding="0"> 
<tr> 
<td> 
<img id="bgimage" src="heroes.jpg"/> 
<div id="content"> 
<p align="center"><input type="submit" class="butt" onclick="dosomething();"/></p> 
</div> 
</td> 
</tr> 
</table> 
</div> 
<style> 
body,html{margin:0;padding:0; height:100% width:100%} 
#bgimage{ position:fixed; left:0; top:0; z-index:1;height:100%; width:100%;} 
#content{position:absolute;left:0; top:0; z-index:70; height:100%; width:100%;} 
.butt { 
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    box-shadow:inset 0px 1px 0px 0px #ffffff; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); 
    background:-moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); 
    background-color:#ededed; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    border:1px solid #3c4fd9; 
    display:inline-block; 
    color:#777777; 
    font-family:arial; 
    font-size:15px; 
    font-weight:bold; 
    padding:6px 24px; 
    text-decoration:none; 
    text-shadow:1px 1px 0px #ffffff; 
}.butt:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed)); 
    background:-moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); 
    background-color:#dfdfdf; 
}.butt:active { 
    position:relative; 
    top:1px; 
} 
.butt{ 
    margin-top:260px; 
    margin-right:190px; 
    } 
    .butt{ 


    } 
</style> 
</body> 
</html>

출처

2013-06-14 user2486297

이미지를 제공 할 수 있습니까? –

http://i40.tinypic.com/eqxpi8.jpg 이것은 이미지입니다. – user2486297

button.classname{ 
    position:fixed; 
    top:value; /*set a value so that it comes on eye horizontally*/ 
    left:value; /*set a value so that it comes on eye vertically*/ 
}

출처

2013-06-14 13:52:05 bugwheels94

고정 위치와 다른 방법으로 절대 위치 작품. 고정 위치를 사용하면 body가 항목의 부모가되지만 절대 위치 항목은 사용자 정의 부모를 가질 수 있습니다 (부모 요소에 position 속성을 제공하면됩니다).

따라서 사람과 눈 버튼을 유지하려는 경우 함께하면 같은 부모를 사용해야합니다. 동일한 부모를 가진 사람과 눈 (고정 또는 절대) 모두에 대해 동일한 위치를 사용하십시오.

두 번째 것은 폭 : 100 % 및 높이 : 100 %를 사용하여 사람의 머리의 크기를 조정하는 것입니다. 그래서 눈 버튼을 원한다면 위치 사용률 (예 : 상단 : 50 %)을 변경하십시오. 봐봐 http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/. 도움이 될지도 모릅니다.

출처

2013-06-14 14:43:13 user2462948

가능한 한 구현하기 쉬운이 솔루션을 만들기 위해 최대한 많은 코드를 수정하지 않으려 고 노력했지만 다음과 같은 방법으로 요청했습니다.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>

HTML :

<img id="bgimage" src=""/> 
<div id="content"> 
    <input type="submit" class="butt" onclick="dosomething();"/> 
</div>

CSS :

body,html{ margin:0;padding:0;height:100%;width:100%} 

#bgimage{ 
    position:fixed; 
    left:0; 
    top:0; 
    z-index:1; 
    height:100%; 
    width:100%; 
} 

#content{ 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:70; 
    height:100%; 
    width:100%; 
} 

.butt { 
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    box-shadow:inset 0px 1px 0px 0px #ffffff; 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf)); 
    background:-moz-linear-gradient(center top, #ededed 5%, #dfdfdf 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); 
    background-color:#ededed; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    border-radius:6px; 
    border:1px solid #3c4fd9; 
    color:#777777; 
    font-family:arial; 
    font-size:15px; 
    font-weight:bold; 
    padding:6px 24px; 
    text-decoration:none; 
    text-shadow:1px 1px 0px #ffffff; 
} 

.butt:hover { 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed)); 
    background:-moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%); 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); 
    background-color:#dfdfdf; 
} 

.butt:active { 
    position:relative; 
    top:1px; 
}

jQuery를 :

$('.butt').css({ 
    "position" : "absolute", 
    "left" : "39%", 
    "top" : "41%" 
});

당신의 HTML의 "머리"섹션에서

넣어이

그냥 복사하여 HTML 파일에 jQuery를 넣고이 붙여 :

이 모든 해상도에서 완벽하지

<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.butt').css({ 
    "position" : "absolute", 
    "left" : "39%", 
    "top" : "41%" 
    }); 
)}; 
</script>

, 당신은 jQuery를의 비율을 조정할해야 할 수도 있습니다, 유일한 대안은을 만드는 것입니다 모든 화면 크기로 조정하기 위해 여러 개의 @media 쿼리를 사용하는 CSS.

출처

2013-06-14 15:38:42 clearskyy

HTML 버튼은 항상 한 곳에 있습니다

답변

관련 문제