html – 全屏登录

概述我正在登录屏幕上工作,我需要让它全屏运行. 我正在尝试将表单放在用户名之上,而且只是我没有得到正确的位置 这是一个例子： http://jsfiddle.net/TSbRY/ #loginbackground{ width:100%; height:100%; position:fixed; top:0px; left 我正在登录屏幕上工作,我需要让它全屏运行.

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

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

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

你可以在全屏幕上看到灰烬http://fiddle.jshell.net/TSbRY/show/它适合某些屏幕分辨率,但不适用于所有

解决方法 那么,有一种方法可以轻松解决这个问题.要么你做巴斯蒂安让在他的回答中说的话,要么你可以继续把这个图像分成两张图片.因此,登录信息将是一个单独的图像.通过这种方式,您可以通过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.5),inset 0 2px 1px 0 rgba(255,255,0 1px 3px 0 rgba(0,0.4);position:absolute;left:30%;right:0;top:40%;              border:1px solID rgba(0,0.2);border-top:none;border-bottom:1px solID rgba(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.3),0 1px 0 0 rgba(255,inset 0 1px 2px 0 rgba(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.1);border-radius:4px;"/></div>

你可以看到我如何使用position：absolute和position：relative with％,height,top,bottom,left和right来创建效果.

请不要只是复制它.试着了解它是如何工作的,从长远来看它会更好地为你服务.

[UPDATED!] Design of OP’s login.

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

免责声明：简单的HTML将在不同的浏览器中呈现相同的平均值,但涉及盒阴影和渐变的更复杂的不会.

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

查看9补丁图像：基本上,当您决定打破这些图像时使用该概念.

总结

以上是内存溢出为你收集整理的html – 全屏登录全部内容，希望文章能够帮你解决html – 全屏登录所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。