Question

enter image description here

我有两张图片我希望看起来与这张照片相似（对于质量感到抱歉，该网站的PSD分散，所以我在几分钟内将图像一起甩出来以显示我的意思。）

我的第一张照片是徽标 - 这是一个戴着眼镜，小道和标题的家伙。

第二张图片是蓝色框，我想成为一个表格，供用户输入他们的电子邮件地址。

我的HTML标记是这样的：

<body id="home">
    <div id="main" method="post" action="">
    <img id="Smarty" src="images/logo.png" />

</div>

       <div id="box" method="post" action="">
       <img id="Form" src="images/form.png" />

</div>

我的css如下：

 #home #main {
margin-top: 10%;
margin-right: auto;
margin-left: auto; }

 #home #main #box {

margin-right: auto;
margin-left: auto; }

目标是使图像看起来像附加的照片，它全部相对于用户屏幕的大小居中。我已经有了相应的缩放背景，但在我的生活中不能弄清楚如何将CSS中的现有PNG与％值重叠而不是固定的像素值。

感谢任何指导！

编辑：

此代码将我的徽标放在正确的位置（中心和页面顶部向下8％）：

  #wrapper #main {

margin-top: 8%;
margin-right: auto;
margin-left: auto;
text-align:center; 
display:block; }


  #wrapper #main #box{

margin-top: 8%;
margin-right: auto;
margin-left: auto;
position: relative;
text-align:center;
display:block; }

但是盒子仍然在徽标下面，并且在最左边。

Answer 1

为什么不将这些图像用作背景？

小例子。

<强> HTML：

<div id="smarty">
    <div id="form">
        <!-- The content -->
    </div>
</div>

<强> CSS：

#smarty {
    background-image: url('images/logo.png');
}

#form {
    background-image: url('images/form.png');
}

P.S。

IE6讨厌使用alpha。

Answer 2

尝试相对于其中一个div添加位置或使用float（右和左）

#home #main {
margin-top: 10%;
margin-right: auto;
margin-left: auto; }

 #home #main #box {

margin-right: auto;
margin-left: auto; 

position: relative;}

Answer 3

您可以在单个div中使用多个图像并重叠。这是重叠多个图像的简便方法

#box{
  background: url (bg1.png) no-repeat top left,url (bg2.png) no-repeat top center,url (bg3.png) no-repeat top center;
}

用div重叠CSS中的图像

3 个答案: