html – 全屏登录

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

那么,有一种方法可以轻松解决这个问题.要么你做巴斯蒂安让在他的回答中说的话,要么你可以继续把这个图像分成两张图片.因此,登录信息将是一个单独的图像.通过这种方式,您可以通过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补丁图像：基本上,当您决定打破这些图像时使用该概念.