X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Наложение изображения
Furin
Furin
Topic Starter сообщение 23.6.2011, 15:02; Ответить: Furin
Сообщение #1


Бог
*****

Группа: Active User
Сообщений: 833
Регистрация: 19.5.2010
Из: Волгоград/Москва/Лондон
Поблагодарили: 213 раз
Репутация:   42  


Привет! Хочу сделать небольшую открытку к юбилею свадьбы близких друзей. Все оформили и прочее, но при верстке один вопрос. Как реализовать в css, чтобы одно изображение наложилось поверх другого?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
artanik
artanik
сообщение 23.6.2011, 15:50; Ответить: artanik
Сообщение #2


Участник
***

Группа: User
Сообщений: 225
Регистрация: 3.5.2011
Из: Украина, Львов
Поблагодарили: 147 раз
Репутация:   47  


Можно, с помощью интересного свойства position и z-index.
<div id="relative">
     <div id="absolute1"></div>
     <div id="absolute2"></div>
</div>


#relative {
     position:relative;/*то есть все дочерние элементы будут позиционироваться относительно этого*/
     width:100px;
     height:300px;
     border:1px sold #000;/*это для большей наглядности*/
}
#absolute1 {
     position:absolute;
     z-index:1;/*нижний слой*/
     width:100px;
     height:300px;
     background:url(image1.png) transparent;
}
#absolute2 {
     position:absolute;
     z-index:2;/*верхний слой*/
     width:100px;
     height:300px;
     background:url(image2.png) transparent;
}

Можно играться с margin, для достижения большей точности. Важно что бы картинка была в формате PNG или GIF. Но PNG криво отображаеться в ИЕ6, а GIF поддерживает всего лишь 255 цветов.


--------------------
Мой промо-сайт

Нужна качественная вёрстка сайтов? Обращайтесь: ICQ 555-177-362 


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Furin
Furin
Topic Starter сообщение 23.6.2011, 18:15; Ответить: Furin
Сообщение #3


Бог
*****

Группа: Active User
Сообщений: 833
Регистрация: 19.5.2010
Из: Волгоград/Москва/Лондон
Поблагодарили: 213 раз
Репутация:   42  


(artanik @ 23.6.2011, 15:50) *
Можно, с помощью интересного свойства position и z-index.

Можно играться с margin, для достижения большей точности. Важно что бы картинка была в формате PNG или GIF. Но PNG криво отображаеться в ИЕ6, а GIF поддерживает всего лишь 255 цветов.

Спасибо, действительно, помогло. Но.. =) Кнопка аудио плеера, который находится под картинкой, стала не активной.. Вообще не нажимается.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Kostap13
Kostap13
сообщение 23.6.2011, 18:21; Ответить: Kostap13
Сообщение #4


Бывалый
****

Группа: User
Сообщений: 358
Регистрация: 5.7.2010
Поблагодарили: 81 раз
Репутация:   17  


(Furin @ 23.6.2011, 18:15) *
Спасибо, действительно, помогло. Но.. =) Кнопка аудио плеера, который находится под картинкой, стала не активной.. Вообще не нажимается.


Скорее всего один из блоков её перекрыл.
Откройте страницу в хроме, правой кнопкой по проблемному участку - анализировать элемент. Далее изучайте кто кого перекрыл.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
artanik
artanik
сообщение 23.6.2011, 19:53; Ответить: artanik
Сообщение #5


Участник
***

Группа: User
Сообщений: 225
Регистрация: 3.5.2011
Из: Украина, Львов
Поблагодарили: 147 раз
Репутация:   47  


кнопке напиишите свойства
#button {
    position:relative;
    z-index:3;
    height:100px;
    width:300px;
}

<div id="relative">
     <div id="absolute1"></div>
     <div id="absolute2"></div>
     <div id="button"></div>
</div>


--------------------
Мой промо-сайт

Нужна качественная вёрстка сайтов? Обращайтесь: ICQ 555-177-362 


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
S1xteen
S1xteen
сообщение 23.6.2011, 20:06; Ответить: S1xteen
Сообщение #6


Бывалый
****

Группа: User
Сообщений: 293
Регистрация: 20.9.2010
Поблагодарили: 64 раза
Репутация:   12  


Не уверен, но можно ещё попробовать так:
<div id="class"><img src="/img.jpeg" /></div>

#class{
background:url(img.png) no-repeat;
width:100px;
height:100px;
}


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
oldzas
oldzas
сообщение 24.6.2011, 10:45; Ответить: oldzas
Сообщение #7


Бывалый
****


Группа: Banned
Сообщений: 279
Регистрация: 16.5.2011
Поблагодарили: 25 раз
Репутация:   1  


1) берутся 2 картинки в png с прозрачным фоном
2) накладываются дивами друг на друга ( позиционирование ) потом z-index устанавливается кто сверху а кто дразниться
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) NextGEN Gallery. Пропали все изображения!
В плагине WP NextGEN Gallery пропали все изображения!
3 aidos 737 30.11.2017, 7:58
автор: Nell
Открытая тема (нет новых ответов) Изображения с shutterstock от 15 рублей/штука
5 Mr_Big 565 10.9.2017, 21:30
автор: Palundra
Горячая тема (нет новых ответов) Стоковые изображения для ваших сайтов по цене 3х рублей
51 contextadlinks 7897 21.10.2014, 17:28
автор: VulkanPartner


 



RSS Текстовая версия Сейчас: 16.12.2017, 11:23
Дизайн