Рамка в виде изображения

[Bryant-24]

Есть некая рамка, в которую заключены по всему сайту фотографии. Изображения имеют фиксированную ширину и длину. Вроде бы ничего сложного нет. Но по углам идет вырез, и все бы хорошо, но фон, на котором расположена эта рамка, не повторяющийся, а значит просто вставить как рисунком рамку нельзя. И прозрачной тоже соответственно не сделать, так как будет видно уголки фотографий. Как поступить, подскажите?

Вот фото: http://joxi.ru/Zi5mBv3

[tius]

Вариант 1. Вашу фотографию делать фоном дива, а внутрь дива вставлять прозрачный в нужных местах пнг/гиф с рамкой.

Вариант 2. Вставлять ваше фото, за ним пускать доп.слой с рамкой и абсолютным позиционированием.

[SelenIT]

Идеальным решением была бы CSS-маска, но это на сегодняшний день Webkit-only...

Лично я бы сделал "накладку" чуть большего размера с PNG-картинкой, где внутренние уголки закрыты "среднестатистическими" кусочками текстуры фона, а снаружи от них вверх и вниз тянутся "шлейфы" пикселей на 10-15 с плавным переходом в полную прозрачность. Если сделать аккуратно, фон будет выглядеть сплошным без заметных стыков.

[Bryant-24]

Спасибо за ответы!

Вариант 1. Вашу фотографию делать фоном дива, а внутрь дива вставлять прозрачный в нужных местах пнг/гиф с рамкой.

Клиент будет загружать/изменять фотографии на сайт. Соответственно они будут квадратные, и уголки у них будут торчать.

Вариант 2. Вставлять ваше фото, за ним пускать доп.слой с рамкой и абсолютным позиционированием.

А как же фон? Он не повторяющийся и будет видна разница

...внутренние уголки закрыты "среднестатистическими" кусочками текстуры фона

Вариант неплохой, но фотографий с такой рамкой много (на главной такая же рамка, но большего размера), а делать так для всех типов рамок не очень хочется. Может есть все таки какой нибудь еще метод?

Edited October 15, 2012 by Bryant-24

[SelenIT]

Я имел в виду как-то так. Можно, в принципе, накладывать уголки и по отдельности (понадобится минимум один дополнительный элемент).

[Bryant-24]

Я имел в виду как-то так

Вы очень хорошо маскируете уголки В моем случае правда зернистость более мелкая, оттого и получается, что сложно передать плавно фон уголков в общий фон сайта. Но я постараюсь сделать как у Вас на примере (я просто фотошопом владею слабо, оттого и пытался сделать стандартными средствами, даже думал резать картинку при помощи PHP, и потом просто добавлять background'ами). Спасибо всем, ушел пробовать, Думаю, тему можно закрывать.

[SelenIT]

Я просто вырезал их из той же текстуры и по краям "причесал" ластиком с большим размытием