[Fobus]

Здравствуйте. Хочется сделать на страницах сайта почти все фото в рамочки. Делать в фотошопе не хочу, потому как сами фото будут часто менятся, а прогонять каждую новую фото через фотошоп-муторно.
Подумал что можно сделать прозрачную всередине рамку и как то с помощью CSS накладывать её на нужные фото. Вот только не соображу как на одно место поставить два IMG....

[kost]

Поставить одно изображение фоном.

Использовать position:absolute.

[Aldes]

img {
border: 1px;
border-color: #000000;
}

[Fobus]

Сообщение от Aldes

img {
border: 1px;
border-color: #000000;
}

Нет я хочу не просто обвести, а раму старинного зеркала на все фото поставить.

Добавлено через 6 минут

Сообщение от kost

Поставить одно изображение фоном.

Использовать position:absolute.

Тогда для каждой фото надо будет делать контейнер?

[kost]

Сообщение от Fobus

Тогда для каждой фото надо будет делать контейнер?

Да.

[Scroll]

Если есть возможность использовать PHP, то удобнее всего будет воспользоваться библиотекой GD

[Fobus]

Сообщение от kost

Да.

Сделал контейнер на странице

<div class="ramka"></div>

в таблице стилей сделал

.ramka { 
        width: 700px;
        height: 300px;
        background-image: url('zerkalo2.gif')
}

zerkalo2.gif - это файл рамки с прозрачной серединой. И рамка теперь лежит ниже фото. Это и правильно я ведь её сделал как фон.......Но нужно чтобы она была наверху. Тоесть получается что я должен каждую фото заносить в таблицу стилей, а на каждой странице вставлять одну и туже рамку 10 раз? Это ещё хуже чем фотки отдельно в фотошопе рамкой украшать...........

[kost]

Сообщение от Fobus

Тоесть получается что я должен каждую фото заносить в таблицу стилей, а на каждой странице вставлять одну и туже рамку 10 раз?

Если картинки — это контент, а не декоративное оформление, то идея, вообще, плохая — класть их фоном. Но если очень хочется, то можно пописывать в inline-стилях.

<div class="ramka" style="background-image: url(image.jpg)">
<img src="zerkalo2.gif" alt="" />
</div>

Это был вариант с background.

Добавлено через 6 минут

Вариант с абсолютным позиционированием.

<div class="framed-image">
  <img src="image.jpg" alt="Фото" />
  <div class="frame"></div>
</div>

Все картинки, как я понимаю, одинакового размера.

CSS:

.framed-image {
  position:relative;
  width: 700px;
  height: 300px;
}

.frame {
  position:absolute;
  top:0;
  left:0;
  width: 700px;
  height: 300px;
  background: url('zerkalo2.gif') 0 0 no-repeat;
}

.framed-image img {
  display:block;
}