Как сделать так, чтобы изображение исчезало с двух сторон [закрыто]

Как вы можете создать изображение, которое будет исчезать на фоне, чтобы его можно было использовать с различной шириной (исчезновение + тот же цвет фона). Таким образом, его можно было использовать при любом разрешении экрана.

Женщина на фоне размытого офиса

Уточните, пожалуйста, что такое использование? Это для веб-сайта, где он будет масштабироваться до ширины браузера? Изображения статичны, они не могут изменить себя.
да, он используется для веб-сайта. изображение не может масштабироваться, но фон может быть. цвет фона точно такой же, как и боковой цвет изображения.
Помечено для перехода на графический дизайн
Это было опубликовано в графическом дизайне.

Ответы (2)

Вот общая техника. Вы не можете изменить размер одного изображения, но у вас может быть несколько изображений. Основное фоновое изображение установлено для обрезки div, в котором оно находится. Затем у вас есть изображение с каждой стороны, которое вы хотите исчезнуть. Каждый из них представляет собой градиент от фона к прозрачному. Я прикрепил пример, чтобы было понятнее. При изменении размера div обтравочные изображения перемещаются для создания эффекта.

введите описание изображения здесь

Я бы также добавил, что возможен и обратный метод. Вы можете сделать края изображения блеклыми, а фон сделать любого цвета. Таким образом, если окно браузера очень узкое (мобильные устройства), лицо на картинке из примера никогда не будет скрыто затенением. Использование цвета градиента CSS3 с цветовым кодом RGBA позволит вам использовать метод, описанный Филом, даже без использования формата PNG для прозрачности. Ему нужна поддержка браузера, но с HTML5 большинство поддерживает его. Однако я предлагаю заглянуть на другие сайты обмена стеками, такие как веб-мастер или графика, чтобы узнать больше об этом.

Фотография, которую вы представляете в качестве примера, имеет малую глубину резкости из-за большой диафрагмы, использованной для ее захвата. Это также может быть обеспечено умеренно большой апертурой, используемой в сочетании с объективом с большим фокусным расстоянием.

Это веб-сайт, посвященный фотографиям, поэтому выше приведены подробные сведения о фотографической части изображения. Вы также можете добиться аналогичного, но не точного (мнения) эффекта, используя программное обеспечение для размытия изображения в определенных областях. Для этого обычно используется Adobe Photoshop.

Тот факт, что вы использовали тег «фейерверк» в сообщении, наводит меня на мысль, что вы спрашиваете о веб-дизайне, и если это так, то этот вопрос для этой области, вероятно, будет не по теме на этом веб-сайте фотографии, вы можете попробовать обмен стеками графического дизайна здесь: https://graphicdesign.stackexchange.com/

спасибо, я не знаю этот сайт. там спрошу.