html - 全屏登录

Question

我正在登录屏幕上工作，我需要让它全屏工作。

我正在尝试将表单放在用户名之上，只是我没有得到正确的位置

这是一个例子：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;
 }

​</p>

我的问题是我想将表单放在用户名和 pas 上，并且在每个屏幕分辨率下都存在，所以当你缩放浏览器时，你需要将表单放在你认为可以输入 img 的部分的顶部.

ash 你可以在这里全屏看到http://fiddle.jshell.net/TSbRY/show/它适用于某些屏幕分辨率，但不适用于所有屏幕分辨率

Answer 1

好吧，有一种方法可以轻松解决这个问题。您可以按照 Bastian Rang 在他的回答中所说的去做，或者您可以继续将该图像分成两张图片。因此，登录信息将是一个单独的图像。这样，您可以通过 css 或 javascript 将其居中并调整大小。并将登录面板设置为相对位置，您可以轻松地将输入放置在内部并轻松移动它。如有必要，我可以解释更多。您面临的问题是因为您拥有的图像结合了输入区域和背景。把它们分开，这会容易得多。

圣诞快乐，新年快乐！本着给予的精神，给你：[更新] OP登录的设计。 您需要在 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 和 % 表示高度、宽度、顶部、底部、左侧和右侧来创建效果。

请不要只是复制它。尝试了解这是如何工作的，从长远来看，它将为您提供更好的服务。

[更新！] OP 的登录设计。

更新：我不确定您是否希望我们为您制作图像并为您提供代码。但如果你是，我想说社区不会为你编写代码，而是会引导你走上正确的道路。您需要知道的是选择更智能的路径。诸如“我需要支持所有浏览器”之类的说法是相当不成熟的。首先通过研究现代浏览器趋势以及使用最多的浏览器来选择您的受众。首先选择最好的浏览器开始开发。有超过 160 种浏览器，开发像您这样复杂的详细布局（即 box-shadows）具有挑战性或几乎不可能。所以，基本上有两个选择纯 css或使用图像和 css. 纯 CSS 可以轻松调整，而图像变得非常静态并且需要时间来创建（如果您不熟悉图形）和/或编辑。图像必须在 Photoshop、Fireworks、GIMP 或 Pixlr.com 之类的工具中制作，以创建图像，然后通过浏览器（使用 css）根据需要对其进行缩放——同样，这并不适合所有浏览器。最后我要说的是，社区不会为你制作图像——那将是你的工作。

免责声明：简单的 html 将在不同的浏览器中完全呈现，但更复杂的涉及 box-shadows 和渐变的则不会。

我制作了一个小图，表示可以实现您正在寻找的完美和跨浏览器兼容性的切口。但这非常具有挑战性。下载到图像以查看完整分辨率的注释/标记。

查看9-patch图像：基本上，当您决定分解这些图像时使用该概念。

Answer 2

你不能。

那是一个图像。

使用像素宽度/高度，您将有一个固定的图像，然后没有全屏；

使用百分比宽度/高度，您将进行图像拉伸/重新缩放，并且您将不知道在哪里或如何重新定位表单字段。

你能做的是

1) 仅使用 CSS 渲染图像，因为它是一个简单的图像，您可以使用 CSS3Gradients和属性来实现Border-radius；Box-shadow

或者

2）使用固定图像，设置margin: 0 auto为始终设置在中心。然后，放置背景颜色以填充屏幕的其余部分。

或者

3）将图像拆分为两个图像：调整背景图像（渐变）的大小，同时仅为登录框设置固定宽度/高度，使其始终居中。

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

这是一个图像，使用它你不能让它按照你想要的方式工作。更好的选择是使用 HTML 标记来创建您想要的效果。我创建了一个类似的页面，这是演示 http://jsbin.com/alivas/1/

要检查我使用的代码，请参阅此链接 http://jsbin.com/alivas/1/edit

Answer 6

您是否尝试过更改z-index？

尝试将表单的 z-index 更改为正数：

z-index:1;

如果您想查看 z-index 的实际效果：Go Here