Cómo hacer que una imagen se desvanezca en dos lados así [cerrado]

¿Cómo puede crear una imagen que se desvanezca en el fondo para que pueda usarse en varios anchos (desvanecimiento + el mismo color de fondo). Por lo tanto, podría usarse en cualquier resolución de pantalla.

Mujer contra un fondo de oficina borroso

Por favor, aclare cuál es el uso. ¿Es para un sitio web, donde se escalaría al ancho del navegador? Las imágenes son estáticas, no pueden modificarse a sí mismas.
sí, se utiliza para un sitio web. la imagen no puede escalar, pero el fondo sí. el color de fondo al igual que el color lateral de la imagen.
Marcado para pasar a Diseño Gráfico
Esto fue publicado en diseño gráfico.

Respuestas (2)

Aquí está la técnica general. No puede cambiar el tamaño de una sola imagen, pero puede tener varias imágenes. La imagen de fondo principal configurada para recortarse en el div en el que se encuentra. Luego, tiene una imagen en cada lado que desea desvanecer. Cada uno de estos es un degradado de fondo a transparente. Adjunto un ejemplo para que quede más claro. Cuando se cambia el tamaño del div, las imágenes recortadas se mueven para crear el efecto.

ingrese la descripción de la imagen aquí

También agregaría que el reverso de este método es posible. Puede hacer que los bordes de la imagen se desvanezcan y tener el fondo de cualquier color. De esta forma, si la ventana del navegador es muy estrecha (dispositivos móviles), la cara de la imagen de ejemplo nunca quedará cubierta por el desvanecimiento lateral. El uso del color degradado CSS3 con el código de color RGBA le permitirá usar el método que Phil describió sin siquiera usar el formato PNG para la transparencia. Necesita compatibilidad con el navegador, pero con HTML5 la mayoría lo admite. Sin embargo, sugiero buscar en los otros sitios de stackexchange como webmaster o gráficos para obtener más información sobre esto.

La foto que presentas como ejemplo tiene poca profundidad de campo dada por la gran apertura utilizada para capturarla. También puede ser proporcionada por una apertura moderadamente grande utilizada en combinación con una lente de distancia focal larga.

Este es un sitio web de fotografía, por lo que arriba están los detalles de la parte fotográfica de la imagen. También puede lograr un efecto similar pero no exacto (opinión) utilizando un software para desenfocar la imagen en ciertas áreas. Adobe Photoshop se usa comúnmente para esto.

El hecho de que haya utilizado la etiqueta "fuegos artificiales" en la publicación me lleva a creer que está preguntando sobre el diseño web, y si ese es el caso, entonces esta pregunta para ese alcance probablemente estaría fuera de tema en este sitio web de fotografía, puede intentar el intercambio de pila de diseño gráfico aquí: https://graphicdesign.stackexchange.com/

gracias, no conozco ese sitio. ahí preguntaré.
Cómo hacer que una imagen se desvanezca en dos lados así [cerrado]
RespuestasAquíPolítica de privacidad1y, 1v