全屏登錄

Question

我正在登錄屏幕上工作，我需要讓它全屏顯示。

我想要的地方形成上的用戶名和PAS只有我沒有收到位置正確

這裏的頂部是一個例子： http://jsfiddle.net/TSbRY/

#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; 
} 

我的問題是，我想將表單放在用戶名和密碼上，並在每個屏幕分辨率下都有，因此，當您擴展瀏覽器時，需要將表單放在您認爲可以鍵入img的部分的頂部。

灰，你可以在全屏看overhere http://fiddle.jshell.net/TSbRY/show/它會適合一些的屏幕分辨率，但並不適用於所有

Answer 1

嗯，有你可以很容易地解決這個問題的一種方式。你要麼做Bastian Rang在他的回答中所說的話，要麼你可以繼續將這張圖片分成兩張圖片。所以，登錄信息將是一個單獨的圖像。通過這種方式，您可以通過css或javascript來調整和調整大小。並將該登錄面板設置爲相對位置，您可以輕鬆地將輸入放置在內部並輕鬆移動。如有必要，我可以解釋更多。您面臨的問題是因爲您已將輸入區域和背景組合在一起的圖像。將它們分開，它會容易得多。

聖誕快樂，新年快樂！本着奉獻的精神，在這裏，你去：[UPDATED] Design of OP's login.你需要在谷歌瀏覽器中看到它，並使用它的最新版本。只在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> 

你可以看到我是如何使用的位置是：絕對和位置：相對與％，持續高度，寬度，頂部，底部，左，右，以創建效果。

請不要只是複製它。試着瞭解它是如何工作的，從長遠來看它會更好地爲您服務。

[UPDATED!] Design of OP's login.

更新：我不知道，如果你期待我們做出的圖像，爲您和爲您提供代碼。但如果你是，我想說，社區不會爲你寫代碼，但會引導你走在正確的道路上。你需要做的就是選擇更智能的路徑。諸如「我需要支持所有瀏覽器」這樣的陳述相當不成熟。首先，通過研究現代瀏覽器趨勢和最常用的瀏覽器來選擇受衆。首先選擇最好的瀏覽器開始開發。這裏有超過160個瀏覽器，開發諸如你的複雜的詳細布局（即盒子陰影）是具有挑戰性或幾乎不可能的。所以，基本上有兩種選擇純css或使用圖像和css。純CSS可以很容易地調整，而圖像變得非常靜態，需要時間來創建（如果你不熟悉圖形）和/或編輯。必須使用Photoshop，Fireworks，GIMP或Pixlr.com等軟件來製作圖像，然後根據瀏覽器的需要（使用css）對圖像進行縮放 - 這對於所有瀏覽器都不是完美的。最後我會說社區不會爲你製作圖片 - 這將是你的工作。

免責聲明：簡單的html將在不同的瀏覽器中呈現相當一致，但更復雜的涉及框陰影和漸變不會。

我做了一個小圖表示可以完成切割，以達到完美和跨瀏覽器兼容性您正在尋找。但這非常具有挑戰性。 下載到圖片以全分辨率查看註釋/標記。

調查9-patch圖片：基本上，使用這個概念，當你決定打破這些圖像。

Answer 2

您是否嘗試過改變z-index？

嘗試改變的形式的z指數爲正數：

z-index:1; 

如果你想在行動中看到的z-index：Go Here

Answer 3

我沒有最終的解決方案，但一些提示您可以使用：

1. 您正在混合像素和百分比。這絕不是一個好主意。
2. 爲什麼你使用圖像作爲背景？在您的示例圖像有可能只是使用背景漸變的CSS - >http://www.colorzilla.com/gradient-editor/

Answer 4

我只能提出一個方法，可以有很多。

首先使用背景圖像作爲實際圖像，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'); 

}) 

其他方法將您的圖像分成兩部分。分別使用頁面和表單的背景圖像。因此，分別使用窗體背景圖像「藍色框」，並使用像素尺寸作爲寬度：400像素並將其調整爲居中。這可以讓你決定在哪裏定位你的元素。

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

Answer 5

你不能。

這是一張圖片。

使用像素寬度/高度，您將有一個固定的圖像，然後沒有全屏;

使用百分比寬度/高度，您將具有圖像拉伸/縮放比例，並且您不知道在何處或如何重新定位表單域。

你可以做的是

1）渲染僅適用於CSS的形象，因爲它是一個簡單的圖像，並且可以實現與CSS3 Gradients，Border-radius和Box-shadow性能;

或

2）使用固定的圖像，設定margin: 0 auto在中心總是設置它。然後，放一個背景色來填充屏幕的其餘部分。

或

3）分割圖像中的兩個圖像：你調整背景圖像（梯度），而只對登錄框中設定的固定的寬度/高度，離開它總是居中。

Answer 6

這是一個圖像，並使用它，你不能讓它按照你想要的方式工作。更好的選擇是使用HTML標記來創建你想要的效果。我創建了一個類似的頁面，這裏的演示 http://jsbin.com/alivas/1/

要檢查我使用的代碼，看到這個鏈接 http://jsbin.com/alivas/1/edit