在CSS中居中和缩放设置图像 - 可能吗？

Question

嘿所有 - 我试图将2张图像放在彼此的中间。为了“易用性”，我将这两个图像合并在一起可能更为谨慎，但现在我有2个图像 - 文本（logo.png）和表单（form.png）。我希望它们看起来像这样，几乎没有对齐 - 并让它们居中在屏幕上，希望它们根据屏幕尺寸缩放和居中。

我有一个简单的方法可以忽略这个吗？这是我的图片和CSS :(抱歉，我没有现场演示，因为我的样本在本地服务器上 - 但如果它可能有帮助我可以上传两者。）

图像有点暂时 - 但尺寸保持不变

 html{
    background: url(images/bg4.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
    }

 #main{
     width: 875px;
     height: 350px;
     background: url(images/form.png) 0 0 no-repeat;
     position: relative;
     margin: 15% 0 0 25%;
     z-index: 1;
    }

 #main form {
     width: 1014px;
     height: 228px;
     background: url(images/logo.png) 0 0 no-repeat;
     position: absolute;
     margin: -210px 0 0 -175px;
     z-index: 2;
    } 

使用此代码 - 我的目标是根据屏幕尺寸使图像居中，并让它们相应缩放。它在我的显示器上工作正常但在我的小型笔记本电脑上偏离中心。

非常感谢您的帮助！

（另外，目前没有标记，我在index.html文件的<style type="text/css">标记中有此代码）

Answer 1

你走了。我为你创建了布局。

检查http://jsfiddle.net/GeD32/

处的工作示例

body{
    color:white;
}
.logo{
    background:black;
    width:100px;
    height:50px;
    clear:both;
}

.menu{
    position:relative;
    z-index:1;
    margin:40px auto 0px auto;
    background:gray;
    width:400px;
    height:50px;
    clear:both;
}

.form{
    position:relative;
    z-index:0;
    margin:-25px auto 0px auto;
    background:red;
     width:500px;
     height:250px;
     clear:both;
}

Answer 2

我相信你已经知道了，但你不能指望CSS3支持，除非你碰巧知道你的所有访问者都会使用最近的浏览器，所以背景路线可能不是最佳选择。

话虽如此，由于您已经为<form>元素提供了固定大小和固定的左上边距，因此当视口大小不同时，它们当然会移位。仅供参考，因为您将它们置于绝对位置，您可以使用left，right，top和bottom属性而不是边距，即top: -210px;和{ {1}}

如果您希望水平居中#main，请使用左侧和右侧值的自动值：

left:-175px;

或

margin: 15% auto <<whatever_bottom_should_be>> - ＆gt;顶部和底部相同的值，左右相同的值

这将告诉浏览器将可用空间平均分配到两个边距。

Answer 3

如果您希望它们居中，您可以使用：

HTML {  宽度：100％;  保证金：0px auto; }

#main {  宽度：875px;  身高：350px;  background：url（images / form.png）0 0不重复;  保证金：0px auto;  z-index：1; }

#main form {  宽度：1014px;  身高：228px;  background：url（images / logo.png）0 0不重复;  保证金：0px auto;  z-index：2; }

但是，如果您追求的是这样的话，请告诉我们。如果它们是两个不同的div标签，通常这个设置可以正常工作。