Как сверстать адаптивный background-image?

Question

[Евгений Ширяев]

Всем привет. Помогите решить следующую проблему. К контейнеру применён background-image и background-color. Внутри данного контейнера есть блок который залит background-color и в нём вставлена картинка. Проблема в том, что при разных разрешениях, блок смещается и перекрывает background-image что очень не красиво. На скриншотах это отчётливо видно.
На 1 скриншоте правильно отображение.

На 2 скриншоте дефект при изменении разрешения экрана.

Answer 1

[Александр Борисович]

Если символьный шрифт подключить? Тогда можно еще менять цвет картинок.

1) Сделать картинки символьным шрифтом (или svg с фильтром тени) тогда примененный text-shadow c цветом фона даст плавный переход.

2) Обернуть блок с картинками в див и ему применить box-shadow с цветом фона. Но тень будет по всем 4 сторонам.

3) Залить блок вот таким градиентом. но тогда нужно на 100% растягивать блок с картинками по высоте.

background: linear-gradient( 90grad, rgba(32,124,202,0) 0%,rgba(32,124,202,1) 10%,rgba(32,124,202,1) 87%,rgba(32,124,202,0) 100%);

https://jsfiddle.net/942r6udd/1/

Comments

[Юрий Янин]

Дак там не в картинках дело. Написали же, что блок с картинками имеет background-color. непонятно только зачем

[Александр Борисович]

Юрий Янин: аа. залит цвет чтобы фон не перекрывал визуально , понял. Вариант тут символьный шрифт с text shadow в цвете бекграунда. Либо дивом оборачивать с box-shadow чтобы был переход плавный когда картинка фона обрезается вдруг наедет.

[Евгений Ширяев]

Может быть и такой вариант и лучше, но это как нужно иконки крутить, а потом плодить на весь контейнер, который к тому же fluid.

[Евгений Ширяев]

Вы имеете в виду шрифтом сделать миниатюры в виде файлов? А что это даст? Блок который содержит иконки со стрелками всё рано не должен быть прозрачным, в противном случае он будет над иконками. Или я что то не понимаю.

[Александр Борисович]

Ну как что, вы там что хотите примените к чему угодно, цвет, тень.) Только если аналогов в шрифте нет придется посидеть чтобы самому их подготовить.
fontello.com

[Евгений Ширяев]

Александр Борисович: получается все иконки, включая стрелку, outlook, фоновые иконки в виде файлов делать с помощью шрифта?

[Александр Борисович]

Евгений Ширяев: можно и так, у вас же адаптивность, а PNG шки на ретине или где уже будут мылом. Если так парит этот косяк в дизайне то на ретине должно ваше чувство идеала просто оскорбить))

[Евгений Ширяев]

Александр Борисович: И к каждой иконки свой стиль прописывать?

[Александр Борисович]

Евгений Ширяев: ну как требует технология так и сделайте. Примените пример заливки градиента выше код кинул и не парьтесь.

[Евгений Ширяев]

Александр Борисович: Применил, всё такой же дефект как на 2 скриншоте.

[Александр Борисович]

Евгений Ширяев: ну такого не может быть. Градиент сверху просто перекроет иконки если они находятся внизу и переход будет плавный. оформите в https://jsfiddle.net/ для примера

[Евгений Ширяев]

Александр Борисович: Здравствуйте, вот посмотрите: https://jsfiddle.net/Jekis_94/j1rvdrnr/#&togetherj...

[Евгений Ширяев]

Александр Борисович: Удалось с помощью градиента размыть края заливки, что не так сильно портит вид. Спасибо за помощь.

[Александр Борисович]

Евгений Ширяев: сори, сделал но забыл показать. Там нужно разверуть градиент на 90 градусов и применить его к спану с паддингом 20 вокруг картинки. Самой картинке сделать дисплей блок. И там все идеально.

[Александр Борисович]

Евгений Ширяев: https://jsfiddle.net/942r6udd/1/