在背景图片/登录中使用CSS [英] Using CSS with background image/login
问题描述
当前，我正在尝试编辑基于Web的应用程序的登录屏幕.到目前为止，我在页面上的特定位置具有登录提示(用户名和密码)，以使其与背景图像相对应.现在，此图像设置为1024x768.
Currently I'm trying to edit a login screen for a web based application. As of now, I have the login prompt (user & password) at a particular place on page so that it corresponds with the background image. Right now this image is set to 1024x768.
我想知道的是，是否有一种方法可以使背景根据用户自己的分辨率自动缩放，同时使登录名显示在正确的位置?我不确定这是否可行，但以为有人可能会提供一些建议.
What I was wondering, is there a way to have the background automatically scale depending on users own resolution while have the login appear at the correct location? I'm not sure if this is possible but thought someone might have some advice.
推荐答案
我制作了一个jsFiddle解决方案，可以派上用场: 点击此处查看工作中的背景调整大小
I've made a jsFiddle solution that can come in handy: Click here to see background-resizing at work
它可与jQuery一起使用，并且我已经注释了大多数代码，因此您可以了解它的工作方式.您可以比较图像和浏览器窗口的长宽比，查看差异，然后根据长宽比的比较方式调整宽度或高度的大小. CSS也值得一看.
It works with jQuery, and I've commented most code so you can understand how it works. You compare the aspect ratio of the image and the browserwindow, look at the difference and then resize the width or height, based on how the aspect ratio's are comparing. The css is also worth a look.
我在Firefox和IE(7/8)中对其进行了测试，但是jsFiddle的大小调整在IE中有点问题.
I tested it in Firefox and IE(7/8), but jsFiddle resizing is a bit buggy in IE.
祝你好运！
更新:
在这种情况下，消息框(在您的情况下为登录框)绝对放置在顶部和右侧的百分比偏移处.我还给了它宽度/高度百分比，尽管这可能不是必需的/不需要的.但是您可以对其进行调整，以查看不同窗口大小时框的行为.
In this scenario, the message box (in your case the loginbox) is positioned absolute with percentual offset to the top and right. I also gave it percentual width/height, although that might not be neccesary/wanted. But you can tweak this to see how the box behaves with different window sizes.
这篇关于在背景图片/登录中使用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
