Как улучшить внешний вид изображения?

Question

[ChrisMenschenin]

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

Comments

[EverOne]

Вы бы хоть код показали или объяснили что значит "обставить". Я вообще ничего не понял.

[ChrisMenschenin]

EverOne: Типо рамки, но это грубо говоря, существует множество способов, которые, может, пока не приходили мне в голову

[EverOne]

ChrisMenschenin: Ладно, попробую вас поуговаривать...
Дорогой мой, вы бы хоть в фотошопе нарисовали то, что хотите увидеть, а то мы тут гадать будем... Уж на код и не надеюсь (Но если вдруг, то лучше сразу в песочницу, сюда выкладывать не надо).

[ChrisMenschenin]

EverOne: мне нужно как-то избежать обычной вставки изображения. Грубый пример, представьте наложение одой фотографии на другую.

[EverOne]

ChrisMenschenin: Представил, я правильно понимаю, что у вас есть фоновая картинка, а на нее вы хотите наложить картинку чуть меньше с рамочкой, так?

[ChrisMenschenin]

EverOne: Суть вопроса вы уловили, да. Но это не обязательно должна быть рамка, я просто впервые столкнулся с такой проблемой, наверняка существуют и другие способы адаптировать изображение.

[EverOne]

ChrisMenschenin: Код того, что уже есть на https://jsfiddle.net/ пожалуйста.

[ChrisMenschenin]

EverOne: https://jsfiddle.net/GeniusG/p5ankeg8/ Вставка на нижнюю часть. Также я рассматриваю этот вариант в качестве фона https://jsfiddle.net/GeniusG/nhptz3p4/

[EverOne]

ChrisMenschenin: А теперь в фотошопе нарисуйте эту самую нижнюю часть, но уже с нужной Вам вставкой.

[EverOne]

EverOne: https://jsfiddle.net/p5ankeg8/1/ Если я все верно понял

[ChrisMenschenin]

EverOne: https://www.sony.com/ я нашёл тут неплохой вариант, обычное закругление изображения с небольшой тенью

[EverOne]

border-radius.com
www.cssmatic.com/box-shadow

ChrisMenschenin: https://jsfiddle.net/p5ankeg8/2/ добавлять в inner-block по вкусу

Answer 1

[xmoonlight]

www.css3.info/preview/multiple-backgrounds
1-й бэкграунд - фон (картинка).
2-й,3-й,4-й,5-й бэкграунды - делаете сторонами рамки с выравниванием по сторонам.

Comments

[ChrisMenschenin]

Не совсем понял. Вы имеете в виду добавить 5 картинок?

[xmoonlight]

ChrisMenschenin: да. основную и 4 бордера. если они все одинаковые - можно из 1-й (квадратной) сделать просто растянув.

Answer 2

[Юрий Есин]

Делаете обертку-родителя, вставляете в него изображение через background-image, делаете дочерний блок, тоже вставляете в него изображение через background-image, далее уже от вашей фантазии зависит, позиционировать можно как угодно, рамку, эффекты, анимации, фильтры, тексты, события, другие блоки - все что пожелаете.