Question

我正在登录界面，我需要让它全屏运行。

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

   #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/它适合某些屏幕分辨率但不适用于所有

Answer 1

嗯，有一种方法可以轻松解决这个问题。要么你做巴斯蒂安让在他的回答中说的话，要么你可以继续把这个图像分成两张图片。因此，登录信息将是一个单独的图像。通过这种方式，您可以通过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>

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

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

[UPDATED!] Design of OP's login.

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

免责声明：简单的html将在不同的浏览器中呈现相同的效果，但涉及盒阴影和渐变的更复杂的不会。

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

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

Download to see the notes

Answer 2

你不能。

这是一张图片。

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

使用百分比宽度/高度，您将进行图像拉伸/重新缩放，并且您将无法确定何处或如何重新定位表单字段。

你能做的是

1）仅使用CSS渲染图像，因为它是一个简单的图像，您可以使用CSS3 Gradients，Border-radius和Box-shadow属性实现该图像;

或

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

或

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

Answer 3

我没有最终解决方案，但您可以使用一些提示：

你在混合像素和百分比。这绝不是一个好主意。
为什么用图像作为背景？您的示例中的图像可以使用css使用背景渐变 - ＆gt; 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

全屏登录

6 个答案: