Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке Наложить картинку на картинку

Наложить картинку на картинку


     10.09.2011    Общие вопросы по вёрстке    5421

вопрос
Итак у меня есть картинка(1)
 css

Картинку(1) я беру из допол. поля
и мне нужно наложить на нее вторую картинку(2) в png
 css

Нашел в нете
Переделал все под свой сайт, но вышло что 1 выше 2, а мне нужно наоборот

Я пробовал z-index, не помогло

Ответил: ПафНутиЙ


В tpl
[full-link][xfgiven_image]
<div class="img_wrap">
<img src="[xfvalue_image]" alt="{title}" title="{title}"/>
<div class="img_border"></div>
</div>
[/xfgiven_image][/full-link]

В css

.img_wrap {
position:relative;
width: 100px;
height: 100px;
owerflow:hidden;
}
.img_wrap img {width:100px;}
.img_border {
position: absolute;
background: url(../images/частично_прозрачная_картинка.png) no-repeat 0 0;
width: 100px;
height: 100px;
top:0;
left:0;
}

Вот собственно всё что нужно, остальной код CSS по месту. Главное чтобы размеры блока .img_wrap и .img_border были одинаковы.

Комментарии пользователей (10)

mefista10
5

19 | 19

mefista10 - 13 сентября 2011 13:14 - Юзер

Неужели я задал такой трудный вопрос?
Уже 4 день никто ответить не может(

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 13 сентября 2011 14:42 - Админ

Затерялся наверное вопрос.
Ответил.

Каков вопрос - таков и ответ. Просто помните об этом.

mefista10
5

19 | 19

mefista10 - 13 сентября 2011 15:04 - Юзер

У меня вышло что картинка (1) осталась на своем месте, а под ней картинка (2)
А мне надо склеить в одну картинку, как 2 слоя, я думаю тут нужно z-index...

mefista10
5

19 | 19

mefista10 - 13 сентября 2011 15:06 - Юзер

и еще картинка(2) чуть больше (1)

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 13 сентября 2011 16:56 - Админ

ну так поменяйте картинки местами.
и увеличьте/уменьшите картинку1/картинку2
либо приведите скриншот.

Каков вопрос - таков и ответ. Просто помните об этом.

mefista10
5

19 | 19

mefista10 - 13 сентября 2011 18:19 - Юзер

написал в л.с.

mefista10
5

19 | 19

mefista10 - 14 сентября 2011 10:53 - Юзер

ПафНутиЙ, Thanks!!!

ПафНутиЙ
1065

3396 | 2434

ПафНутиЙ - 14 сентября 2011 12:16 - Админ

Наздоровье)))

Каков вопрос - таков и ответ. Просто помните об этом.

Sander
1126

1638 | 1204

Sander - 13 сентября 2011 13:55 - Эксперт

.news-item-img - телепатов нету. Что это? Почему в html не показано его применение?
А вообще надо не margin и padding использовать, а position:absolute; и position:relative;

SanDev.pro - мой блог.

ICQ: 404-037-556
Skype: Sander8804

mefista10
5

19 | 19

mefista10 - 13 сентября 2011 14:12 - Юзер

.news-item-img - Это картинки на главной, берутся из дополнительного поля, я все подробно написал...
Я хочу что бы было как в фотошопе, первый слой - это картинки(1), второй,выше, тоже картинка(2)
css (2) я взял с нета, так что можеш не обращать внимания на padding и margin
Если еще что то нужно, пиши я добавлю...

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы