Jump to content
  • 0

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


Bryant-24
 Share

Question

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

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

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

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

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

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

  • Like 1
Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

Edited by Bryant-24
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy