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

固定位置と絶対位置は異なる方法で機能します。固定位置を使用する場合、ボディはアイテムの親になりますが、絶対位置のアイテムはユーザー定義の親を持つことができます (親要素に位置プロパティを与えるだけです)。

したがって、男性と目のボタンを一緒に保ちたい場合は、同じ親を使用する必要があります。同じ親を持つ人間と目 (固定または絶対) の両方に同じ位置を使用します。

2 つ目は、幅: 100% と高さ: 100% を使用して男性の頭のサイズを変更していることです。そのため、目のボタンも必要な場合は、位置の使用率を変更します (例: 上: 50%)。http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizo​​ntally-and-vertically/をご覧ください。それはあなたを助けるかもしれません。

于 2013-06-14T14:43:13.833 に答える
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 に答える