2

おはようございます。

私はCSSを初めて使用し、いくつかのトピックを読んでいますが、BG画像の上にフォーム送信ボタンを保持しようとすると完全に困惑します. ページを拡大するとすぐに、ボタンの位置がずれます。

BG の CSS コードは次のとおりです。

body
{ 
background-image:url('../pics/BGs/FrontBG.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background size: auto;
}
.bannerlogin1
{
position: relative;
top: 50;
left: 50;
}

.bannerlogin2
{
position: absolute;
top: 5px;
left: 400px;
}  

.bannerlogin3
{
position: absolute;
top: 5px;
left: 800px;
}

.bannerlogin4
{
position: absolute;
top: 5px;
left: 1250px;
}

そして私のウェルカムページのコード：

<BODY class="body" bgcolor="black">

<form action="../Nightlife.php">
<input class="bannerlogin1" type="submit" value="" style="width: 250px; height: 100px;    background-color:transparent; border:;" >
</form>

<form action="../Portrait.php">
<input class="bannerlogin2" type="submit" value="" style="width: 250px; height: 100px; background-color:transparent; border:;" >
</form>


<form action="../Contact.php">
<input class="bannerlogin3" type="submit" value="" style="width: 250px; height: 100px; background-color:transparent; border:;" >
</form>


<form action="../Client.php">
<input class="bannerlogin4" type="submit" value="" style="width: 250px; height: 100px; background-color:transparent; border:;" >
</form>

助けてくれてありがとう:)。私は根本的に馬鹿げたことをしているかもしれないと感じていますが、w3学校などからいくつか読んだことがありますが、これを解決するための簡潔な答えを見つけることができないようです.

4

1 に答える 1

0

にはform相対的な配置が必要です。それ以外の場合、ズームインすると、入力はページの本文に配置されます。

form{position:relative;}

また、送信ボタンのインライン CSS をスタイル ブロックに移動する必要があります。

input["submit"]{width: 250px; height: 100px; background-color:transparent;}

注: ["submit"] は CSS3 のみの属性です。

于 2012-11-24T09:36:30.017 に答える