0

我有带有背景图像的 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>
4

3 回答 3

2 
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-14T13:52:05.007 回答
0

我尽量不对您的代码进行太多调整，以使此解决方案尽可能易于实施，但我已经按照以下方式完成了您的要求。

把它放在 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 来调整每个屏幕尺寸。

于 2013-06-14T15:38:42.503 回答
0

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

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

第二件事是，您正在使用 width: 100% 和 height: 100% 来调整男人的头部大小；所以，如果你想要眼睛按钮也改变位置的位置使用百分比（例如顶部：50％）。看看http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizo​​ntally-and-vertically/。它可能会帮助你。

于 2013-06-14T14:43:13.833 回答