Как сделать border с картинкой у которой есть фон?

Question

[DZHAMBUALT]

Здраствуйте. Столкнулся с такой ужасной вещью как дизайнерский взгляд. В макете есть блок у которого есть кастомный бордер. Я конечно понимаю что можно сделать через before и after и добавить картинку, но проблема с фоном картинки.



У картинки есть свой ПРОЗРАЧНЫЙ фон. Если бы он был не прозрачным я бы взял вместе с фоном и вставил бы в before.


Еще масла в огонь заливает тот факт что этот бордер входит на территорию блока


Из-за этого если я возьму картинку с фоном и добавлю в before то из-за прозрачности фоны буду накладываться друг на друга и создавать чуть темный цвет в месте соединения

Для контраста добавил синий цвет. Там ели ели видно наложение фона но оно есть и это нужно решить

Comments

[Aleksey Solovyev]

В чем проблема вырезать фон у картинка с бордюром и не будет:

Из-за этого если я возьму картинку с фоном и добавлю в before то из-за прозрачности фоны буду накладываться друг на друга и создавать чуть темный цвет в месте соединения

[Ivan Ustûžanin]

border-image? он умеет на основе одной картинки не только бордер, но и задник делать (правда делал не сам, а видел где-то в примерах)

[Ankhena]

Если бы он был не прозрачным я бы взял вместе с фоном и вставил бы в before.

Так уберите его.
И дальше обычный border-image.
У кнопок-то ведь тоже без фона же делаете.

[DZHAMBUALT]

Ankhena, Aleksey Solovyev, Ivan Ustûžanin Смотрите какой прикол без фона.


Думаю border-image не то что нужно так как его чуть наверх относительно родителя нужно сместить и тут translate-y подходит с позиционированием

[Ankhena]

DZHAMBUALT, пристыкуйте эту часть отдельно. Или только фон от неё. Или делайте фон блока кусочками из градиентов.

Answer 1

[Сергей delphinpro]

DZHAMBUALT, вырежьте картинку верхней рамки, уберите фон. в узкой полоске вверху фон не убирайте. Чуть-чуть подгоните размеры. скруглите углы у блока, если они будут видны из-под картинки.
картинку положите в два псевдо по 50%
у левого background-position: 0 0; у правого background-position: 100% 0;
Картинку сделать подлиннее (клонировать среднюю полоску) - так вы легко сделаете блок переменной ширины.
картинка простая фигура, лучше использовать svg.

PS. Вернуть бы вас лет на 10-15 во времени. Тогда такие дизайнерские рамки были в моде, а css был не особо продвинутый. И ничего - верстали.

Comments

[DZHAMBUALT]

Да уж костыльненько но что поделать

Answer 2

[Qoragar]

Если (насколько понял) проблема в том, что before/after накладываются на контент (кнопки) — есть один хитрый костыль, как убрать их ПОД контент блока (правда, могут быть проблемы с обратной совместимостью для совсем старых/редких браузеров).

На родительском div:

...
background-image: url("ВертикальнаяРамка.png");
background-position: center;
background-repeat: no-repeat;
background-size: 100% calc(100% - (ВысотаВерхнейРамки×2)px);
 /*Рассчитываем высоту вертикального центрального блока
за вычетом верхней и нижней рамки*/
...
transform-style: preserve-3d;
 /*Последний параметр нужен для возможности
манипулирования before/after по глубине,
поскольку с ними не работает обычный z-index*/

На div::before:

width: 100%;
height: ВысотаВерхнейРамки;
background-image: url("ВерхняяРамка.png");
background-position: center;
background-repeat: no-repeat;
...
/*Позиционируем по верхнему краю блока*/
...
transform: translateZ(-1px); /*Уходит ПОД весь контент*/

На div::after:

width: 100%;
height: ВысотаВерхнейРамки;
background-image: url("ВерхняяРамка.png");
background-position: center;
background-repeat: no-repeat;
...
/*Позиционируем по нижнему краю блока*/
...
transform: scaleY(-1) translateZ(-1px); /*Отражается вертикально и уходит ПОД весь контент*/

Вот как-то так видится...