我正在尝试将表单放在用户名之上,而且只是我没有得到正确的位置
这是一个例子:
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/它适合某些屏幕分辨率,但不适用于所有
解决方法
@H_301_16@ 那么,有一种方法可以轻松解决这个问题.要么你做巴斯蒂安让在他的回答中说的话,要么你可以继续把这个图像分成两张图片.因此,登录信息将是一个单独的图像.通过这种方式,您可以通过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补丁图像:基本上,当您决定打破这些图像时使用该概念.