html - 全画面ログイン

Question

ログイン画面で作業していますが、フルスクリーンで動作させる必要があります。

ユーザー名の上にフォームを配置しようとしていますが、位置が正しくありません

   #loginbackground{
        width:100%;
        height:100%;
        position:fixed;
        top:0px;
        left:0px;
        background: url(http://ivojonkers.com/loginscreentemp.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
        -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
}

    #loginbackground form{
        width:18.667%;
        height:7.466%;
        position:absolute;
        top:51.4%;
        left:50%;
        margin-left:-8.867%;
 }

    #loginbackground input{
        width:100%;
        height:31.25%;
        background-color:#F00;
        border:none;
        font:Georgia, "Times New Roman", Times, serif;
        font-size:18px;
        position: absolute;
 }

</p>

私の問題は、フォームをユーザー名とパスに配置し、すべての画面解像度で表示したいことです。そのため、ブラウザーをスケーリングするときは、img を入力できると思われる部分の上にフォームを配置する必要があります。 .

http://fiddle.jshell.net/TSbRY/show/のフルスクリーンで見ることができる灰は、一部の画面解像度には適合しますが、すべての解像度には適合しません。

score 6 · Accepted Answer

さて、これを簡単に解決できる方法があります。バスティアン・ラングが彼の答えで言ったことをするか、先に進んでその画像を2つの写真に分割することができます. そのため、ログイン情報は別の画像になります。そのようにして、cssまたはjavascriptを介して中央に配置してサイズを変更できます。そのログインパネルを相対位置に設定すると、入力を内部に簡単に配置して簡単に移動できます。必要に応じて、さらに説明できます。あなたが直面している問題は、あなたが持っている画像が入力領域と背景を組み合わせているために発生します。それらを分割すると、はるかに簡単になります。

メリークリスマス、そして、あけましておめでとう！与える精神で、ここに行きます: [更新] OP のログインのデザイン。 Google Chrome で表示し、最新バージョンを使用する必要があります。Google Chrome でのみテストされています。

<div style = "height:100%;width:100%;position:relative;top:0;right:0;left:0;bottom:0;
position:fixed;">
<div style = "background:red;height:55%;top:0;left:0;right:0;position:absolute;background: -webkit-linear-gradient(top, #3BBCFE, #64D5FF,#06ADFE);"></div>
<div style = "background:blue;height:45%;top:55%;left:0;right:0;position:absolute;background: -webkit-linear-gradient(top, #59D2FF,#41C1FE);"></div>
<div style = "background:green;height:20%;width:40%;background: -webkit-linear-gradient(top, #01C5FF,#076799);border-radius:4px;
              box-shadow:0 0 120px 0 rgba(0,0,0,0.5), inset 0 2px 1px 0 rgba(255,255,255,0.5), 0 1px 3px 0 rgba(0,0,0,0.4);position:absolute;left:30%;right:0;top:40%;
              border:1px solid rgba(0,0,0,0.2);border-top:none;border-bottom:1px solid rgba(0,0,0,0.7);">
                  <input type = "text" style = "position:absolute;left:5%;top:18%;right:5%;width:90%;height:25%;border:none;background:#00A2ED;box-shadow:inset 0 1px 8px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.5),inset 0 1px 2px 0 rgba(0,0,0,0.1);border-radius:4px;"/>
                  <input type = "text" style = "position:absolute;left:5%;top:53%;right:5%;height:25%;width:90%;border:none;background:#00A2ED;box-shadow:inset 0 1px 8px 0 rgba(0,0,0,0.3), 0 1px 0 0 rgba(255,255,255,0.5),inset 0 1px 2px 0 rgba(0,0,0,0.1);border-radius:4px;"/>
</div>

高さ、幅、上、下、左、右に % を指定して position:absolute と position:relative を使用して効果を作成した方法がわかります。

コピーだけしないでください。これがどのように機能するかを理解するようにしてください。長期的にはより役立つでしょう。

[UPDATED!] OPのログインのデザイン。

更新:私たちがあなたのために画像を作成し、コードを提供することを期待しているかどうかはわかりません. しかし、もしそうなら、コミュニティはあなたのためにコードを書くのではなく、あなたを正しい道に導いてくれると言いたいです. 知っておくべきことは、よりスマートな道を選ぶことです。「すべてのブラウザーをサポートする必要がある」などのステートメントは、かなり未熟です。最新のブラウザーの傾向と、どのブラウザーが最も使用されているかを調べて、視聴者を選択することから始めます。開発を開始するのに最適なブラウザーを選択することから始めます。ブラウザは 160 以上ありますが、あなたのような複雑で詳細なレイアウト (つまり、ボックスシャドウ) を開発することは困難であるか、ほとんど不可能です。したがって、基本的に純粋な cssまたは画像と css を使用する2 つのオプションがあります。. 純粋な CSS は簡単に調整できますが、画像は非常に静的になり、作成 (グラフィックスに精通していない場合) や編集に時間がかかります。画像を作成するには、Photoshop、Fireworks、GIMP、または Pixlr.com などで画像を作成し、必要に応じてブラウザーで (css を使用して) スケーリングする必要があります。これも、すべてのブラウザーで完璧ではありません。最後に、コミュニティがあなたに代わって画像を作成することはありません。それはあなたの仕事です。

免責事項: 単純な html はさまざまなブラウザーでまったく同じようにレンダリングされますが、ボックスシャドウやグラデーションを含む複雑なものはそうではありません。

私はあなたが探している完璧さとクロスブラウザの互換性を達成するために行うことができるカットアウトを表す小さな図を作りました. しかし、これは非常に困難です。画像をダウンロードして、メモ/マーキングをフル解像度で表示します。

9 パッチ画像を調べます。基本的に、これらの画像を分割する場合は、その概念を使用してください。

ダウンロードして注意事項を確認する

score 4 · Accepted Answer

できません。

それがイメージです。

ピクセル幅/高さを使用すると、画像が固定され、フルスクリーンにはなりません。

幅/高さの割合を指定すると、画像の伸縮/再スケーリングが行われ、フォームフィールドのどこをどのように再配置するかについての手がかりがなくなります。

あなたができることは

1) CSS のみで画像をレンダリングします。これは単純な画像であり、CSS3 とGradientsプロパティを使用して実現できるためです。Border-radiusBox-shadow

また

2) 固定画像を使用し、margin: 0 auto常に中央に設定するように設定します。次に、背景色を配置して、画面の残りの部分を埋めます。

また

3) 画像を 2 つの画像に分割します。背景画像 (グラデーション) のサイズを変更し、ログインボックスのみに固定幅/高さを設定して、常に中央に配置します。

score 0 · Accepted Answer

それは画像であり、それを使用すると、希望どおりに機能させることはできません。より良いオプションは、HTMLマークアップを使用して必要な効果を作成することです。同様のページを作成しました。これがデモです http://jsbin.com/alivas/1/

使用したコードを確認するには、このリンク http://jsbin.com/alivas/1/editを参照してください。

score 0 · Accepted Answer

私は方法を提案することしかできません、多くのことがありえます。

まず、背景画像を実際の画像、imgタグとして使用します。次に、 z-indexを使用して、入力要素をその上に絶対に配置します。jquery .height（）を使用して画像の高さを計算します。次に、入力フィールドの位置を動的に決定します。

$(document).ready(function(){
$width=$('img#backimage').width();
$height=$('img#backimage').height();

/*Code to decide the position of box based on image dimensions*/
$('form').css('top','your calculated value');

})

もう1つの方法は、画像を2つの部分に分割することです。ページとフォームの背景画像を別々に使用します。したがって、フォームの背景画像「青いボックス」を個別に使用し、ピクセルのサイズをwidth：400 pxとして使用し、中央に調整します。これにより、要素を配置する場所を正確に決定できます。

form{
background:url('yourbox.png');
width:400px; /*consider this is width of your backg image too*/ 
left:50%;
top:500px;
margin-left:-200px; /*To adjust to center*/
padding-top:20px; /*Adjust according to back image*/
padding-left:10 px;/*Adjust according to back image*/
}

score 0 · Accepted Answer

最終的な解決策はありませんが、使用できるヒントがいくつかあります。

ピクセルとパーセントを混ぜています。それは決して良い考えではありません。
なぜ背景に画像を使うのですか？あなたの例の画像は、背景のグラデーションを使用したcssだけで可能です-> http://www.colorzilla.com/gradient-editor/

score -4 · Accepted Answer

z-indexを変更してみましたか?

フォームの z-index を正の数に変更してみてください。

z-index:1;

z-index の動作を見たい場合:ここに移動

html - 全画面ログイン

6 に答える 6

Related

Reference