Перекрывающиеся изображения в CSS с помощью divs - PullRequest
Новая
       8

Перекрывающиеся изображения в CSS с помощью divs

0 голосов
/ 09 марта 2011

enter image description here

У меня есть 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; }

Цель состоит в том, чтобы изображение выглядело как прикрепленная фотография, при этом все было отцентрировано относительно размера экрана пользователя. У меня уже есть фон, работающий для соответствующего масштабирования, но я не могу понять, как перекрывать существующие PNG в CSS со значениями%, а не с фиксированными значениями пикселей.

Спасибо за любые советы!

EDIT:

Этот код размещает мой логотип в нужном месте (по центру и на 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; }

Но поле все еще находится под логотипом и далеко слева.

Ответы [ 3 ]

3 голосов
/ 09 марта 2011

Почему бы вам не использовать эти изображения в качестве фона?

Маленький пример.

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

PS

IE6 ненавидят png с альфа.

1 голос
/ 09 марта 2011

попробуйте добавить позицию относительно одного из элементов div или используйте float (вправо и влево) 

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

 #home #main #box {

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

position: relative;}
0 голосов
/ 09 марта 2011

вы можете использовать несколько изображений в одном div с перекрытием. это простой способ наложения нескольких изображений 

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