Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Наложить картинку на картинку

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


     10.09.2011    картинка    Все вопросы » Общие вопросы по вёрстке    5850

вопрос
Итак у меня есть картинка(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
Юзер

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

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

ПафНутиЙ
Админ

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

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

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

mefista10
Юзер

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

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

mefista10
Юзер

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

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

ПафНутиЙ
Админ

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

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

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

mefista10
Юзер

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

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

mefista10
Юзер

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

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

ПафНутиЙ
Админ

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

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

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

Sander
Эксперт

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

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

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

ICQ: 404-037-556
Skype: Sander8804

mefista10
Юзер

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

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

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

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

наверх