Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > как сделать картинку на картинке

Автор: gambit 4.3.2008, 09:21

Мне хочется сделать чтоб на загруженные пользователями картинки накладывались рамки (и не только рамки)(в общем gifы с прозрачными областями) в зависимости от условия.
Для примеры что я хочу сделать: как делает windows стрелки на иконки, есть иконка приложения и иконка стрелки и одна накладывается на другую.

Автор: bars80080 4.3.2008, 09:57

а что здесь сложного, если вопрос в вёрстке?

два рисунка, одинковых размеров внутри контейнера с position: relative, а у рисунков { position: absolute; top: 0; left: 0; }

если же делать единый рисунок, то это вопрос в раздел php:графика

Автор: gambit 4.3.2008, 11:17

Цитата(bars80080 @ 4.3.2008, 09:57

)

два рисунка, одинковых размеров внутри контейнера с position: relative, а у рисунков { position: absolute; top: 0; left: 0; }

вот это можно поподробнее.

Автор: frik8th 4.3.2008, 11:48

берёшь и позиционируешь два дива так чтобы один накладывался на другой

Автор: bars80080 4.3.2008, 11:54

Код


<style>
.place_for_image { position: relative; width: 100px; height: 100px; }
.place_for_image img { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; }
</style>
<div class="place_for_image">
<img src="pict.jpg" />
<img src="ramka.png" />
</div>

вроде всё

Автор: SelenIT 4.3.2008, 13:00

Как вариант - накладываемый рисунок сделать прозрачным, а "обрабатываемый" подложить под него фоном (так, как http://habrahabr.ru/blog/css/36897.html предлагают подкладывать тень). В качестве побочного эффекта получится простейшая защита от копирования картинки ламером через правый клик smile

.

Но по-хорошему, имхо, такие вещи лучше делать физически на сервере — с помощью imageMagick etc.