重疊圖像與申報單

我有2個圖像我想類似於照片（約質量對不起，該網站的PSD分散，所以我在幾分鐘一起攪打圖像以表明我的意思）。

我的第一個形象是標誌 - 這是戴眼鏡的人，png的足跡和標題。

第二個圖像是藍色框，我想成爲一個用戶的電子郵件地址表單。

我的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; }

但盒子仍低於徽標和到最左邊。加入相對

來源

2011-03-08 Sapp

你爲什麼不使用這些圖片作爲背景？

小例子。

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'); 
}

附：

IE6討厭與阿爾法png。

來源

2011-03-08 22:33:39 Michas

而不是塊？那麼我的表單圖像將需要文本和提交框，正在使用一個更可接受的方法作爲背景？ – Sapp 2011-03-08 22:37:28

@Michas，是啊：但是，你知道，網絡上的東西*不會* IE6討厭復仇？ – 2011-03-08 22:46:04

@Sapp：我添加了一個小例子。在img標籤上放置背景圖片比放在圖片上要容易得多。就這些。 – Michas 2011-03-08 22:48:26

試位置的div的一個或使用float（左，右）

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

#home #main #box { 

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

position: relative;}

來源

2011-03-08 22:10:24 Neal

因此，讓我的標誌絕對和我的箱子相對於標誌？ – Sapp 2011-03-08 22:44:19

是的。或反向也可能工作 – Neal 2011-03-08 22:55:17

您可以在單個div中使用多個圖像進行重疊。它是重疊多個圖像的簡單方法

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

來源

2011-03-09 04:41:34 sandeep

這個CSS究竟在做什麼？對不起，我的無知 – 2012-10-19 13:59:47

@JaysonRagasa這是一個名爲** multiply background **的css3屬性閱讀本文以獲得更多信息https://developer.mozilla.org/zh-CN/docs/CSS/Using_CSS_multiple_backgrounds – sandeep 2012-10-20 05:44:06

重疊圖像與申報單

回答

相關問題