Quiero eliminar por completo el fondo de una imagen de forma irregular, no solo hacerla transparente. El cuadro de la imagen se superpone con otras cosas y estorba. Tiene que haber una manera de eliminar el espacio extra.
Recorté mi imagen lo más cerca que pude en Photoshop e hice que el fondo restante fuera transparente. Mi imagen es más ancha en la parte superior que en la inferior (imagen de un bastón de caramelo vertical), por lo que deja mucho espacio vacío que se superpone con otros objetos en la página.
Tiene que haber una manera de eliminar el espacio extra.
Respuesta corta: no puedes.
Respuesta larga: no puedes, pero no es necesario. Nadie más lo intenta.
(Calificador: me dedico al desarrollo web y lo enseño a nivel universitario)
Todo en una página web es un rectángulo. Siempre lo ha sido desde el navegador Mosaic 1.0 en 1993. La transparencia existe para proporcionar la ilusión de formas no rectangulares y se usa prácticamente en todas partes.
Entonces, lo que haces con tu bastón de caramelo es ponerlo en segundo plano. Ya sea como una propiedad de imagen de fondo donde puede desplazarla con bastante facilidad con la posición de fondo, o use la posición: absoluta en la etiqueta <img> y continúe desde allí.
Si desea que su texto fluya alrededor de un objeto irregular, la forma habitual es una pila de objetos <div> vacíos y el uso creativo de float. Es mucho tiempo hacerlo bien, tengo a la mayoría de los diseñadores entrenados para no hacerlo.
clip-path es muy prometedor, pero hasta que Microsoft se ponga al día, aceptamos que los usuarios de MSIE verán otra cosa o haremos otra cosa.
Como ya señaló Scott: todas las imágenes en todo el mundo son rectangulares. No puede 'eliminar' partes de este rectángulo.
Dicho esto, CSS te ofrece algunas opciones para ir un paso más allá.
opción 1: borde-radio
Puede usar el radio de borde de css para eliminar parte del espacio sobrante en la parte inferior. Border-radius se usa para esquinas redondeadas, pero puede pasar un valor para cada esquina. Para que pueda recortar más en la parte inferior que en la parte superior.
opción 2: ruta de recorte
CSS3 también cuenta con una propiedad de recorte completa . Es un poco difícil entenderlo, pero una vez que lo entiendes, puede ser una característica muy poderosa. Puede usar el enmascaramiento SVG para 'eliminar' partes de su imagen. Por ahora, la compatibilidad con el navegador está bien en el mejor de los casos, así que utilícelo con precaución si desea admitir IE y navegadores más antiguos.
PD: Si no conocías el maravilloso sitio web de trucos CSS antes, conócelo y ámalo ahora si te tomas en serio el diseño web.
Zach Saucier
scott
scott
amanda
scott
Ryan