Question

我有背景图片的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>

Answer 1

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*/ 
}

Answer 2

固定位置和绝对位置以不同方式工作。如果使用固定位置，body将是项目的父项，但绝对定位项可以具有用户定义的父项（只需为父元素提供位置属性。）

所以，如果你想把人和眼睛按钮放在一起，你必须使用同一个父母。对于具有相同父母的人和眼睛（固定或绝对）使用相同的位置。

第二件事是，你使用宽度调整男人的头部：100％和身高：100％;所以，如果你想要眼睛按钮也改变位置使用百分比（例如，顶部：50％）。看看http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/。它可能会对你有帮助。

Answer 3

我尽量不对代码进行那么多调整，以使这个解决方案尽可能容易实现，但我已经按照以下方式完成了你所要求的工作。

将它放在HTML的“head”部分：

<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%"
});

将jQuery放入HTML文件中只需复制并粘贴它：

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

这在所有分辨率上并不完美，你可能需要调整jQuery中的百分比，唯一的选择是使用多个@media查询创建一个CSS来调整每个屏幕大小。

HTML按钮总是一个地方

3 个答案: