Cómo Eliminar la Imagen de Fondo en HTML: Pasos Sencillos
Hay momentos en los que puedes desear establecer un fondo de página web o editar un elemento para que luzca más estéticamente agradable o resaltar algo específico, etc.
Sin embargo, hacerlo mediante HTML no es tarea fácil para todos. ¡Aquí está tu guía sobre cómo puedes quitar imágenes de fondo en HTML fácilmente!
¿Cómo quitar imágenes de fondo en HTML?
Aquí están los pasos que necesitas seguir para eliminar la imagen de fondo en HTML:
Paso 1: Crea un HTML utilizando un elemento <h2> y tres elementos <div>. Y para el segundo <div>, usa un "id" que lea "no-background".
<h2>Example</h2>
<div></div>
<div id="no-background"></div>
<div></div>
Paso 2: Agrega CSS comenzando por añadir estilo a los primeros y últimos elementos <div>.
Añade la altura y anchura de tu <div> y luego especifica el margen inferior, propiedades del borde y el color de fondo.
Luego, utiliza la propiedad background-image con el valor "url". Después de esto, asigna background-repeat a "no-repeat" y termina añadiendo background-size.
Así es como podría verse:
div {
height: 170px;
width: 300px;
margin-bottom: 20px;
background-color: #CDCDCD;
border: 2px solid #CDCDCD;
background-image: url('https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
background-repeat: no-repeat;
background-size: 100%;
}
Paso 3: Por último, estiliza el <div> con el "id" llamado "no-background" y elimina el fondo del elemento <div> y establece la propiedad background-image a "none".
div#no-background {
background-image: none;
}
Su código completo podría verse así:
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
height: 170px;
width: 300px;
margin-bottom: 20px;
background-color: #CDCDCD;
border: 2px solid #CDCDCD;
background-image: url('https://images.unsplash.com/photo-1507919909716-c8262e491cde?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
background-repeat: no-repeat;
background-size: 100%;
}
div#no-background {
background-image: none;
}
</style>
</head>
<body>
<h2>Example</h2>
<div></div>
<div id="no-background"></div>
<div></div>
</body>
</html>
¡Y con esto, el fondo de tu imagen se elimina con éxito!
Elimina el fondo de imágenes PNG, JPG, JPEG y WebP con Erase.bg:
Erase.bg es una herramienta inteligente de eliminación de fondo y edición que ayuda a editar tus imágenes con precisión. Con Erase.bg, cualquiera puede quitar fácilmente el fondo de una imagen sin importar sus habilidades técnicas. Puedes usar Erase.bg para quitar el fondo de imágenes en formato PNG, JPG, JPEG y WebP.
Para quitar el fondo de estos formatos, debes acceder a Erase.bg a través del sitio web o descargar la aplicación Erase.bg desde la App Store (para usuarios de iOS) o Google Play Store (para usuarios de Android).
Puedes eliminar fácilmente el fondo de imágenes WebP, PNG, JPG y JPEG utilizando Erase.bg:
Paso 1: Haz clic en la caja de diálogo que dice "Subir Imagen" o también puedes arrastrar y soltar la imagen en la página.
Paso 2: Aparecerá un mensaje en la pantalla que dice "Cargando imagen, por favor espera...", y durante este tiempo, la inteligencia artificial de Erase.bg realizará su magia para quitar el fondo de la imagen de tu elección.
Paso 3: Si deseas eliminar algo o editar la imagen, verás una opción de Edición en la esquina superior derecha de la imagen con el fondo eliminado.
Paso 4: Descarga la imagen editada en tu dispositivo sin fondo.
FAQ
Aquí, hemos enumerado algunas de las preguntas más frecuentes de la comunidad. Si no encuentra la información que necesita, no dude en comunicarse con nosotros en support@pixelbin.io
Para agregar color de fondo en HTML, sigue estos pasos:
PD: En este ejemplo, cambiaremos el color de fondo de una tabla.
Paso 1: Escanea el código HTML para identificar el elemento que deseas editar. Si es el encabezado, busca la etiqueta de apertura <header>, y si es un div, busca la etiqueta <div>.
Paso 2: Ahora elige un color de entre la variedad disponible. Aquí seleccionaremos #33475b.
Paso 3: Después, agrega un atributo de estilo a la etiqueta de apertura. Así es cómo se verá tu código HTML:
<table style="background-color:#33475b">
<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>example@company.com</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>example2@company.com</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>example2@company.com</td>
</tr>
</table>
Para establecer un color de fondo en HTML, debes utilizar el atributo style, que especifica un estilo en línea para el elemento.
El atributo style siempre se utiliza con la etiqueta HTML <body>, junto con la propiedad CSS background-color. Esto se debe a que HTML5 no admite el atributo bgcolor para la etiqueta <body>.
Por lo tanto, así es cómo podría verse tu código:
<!DOCTYPE html>
<html>
<head></head>
<bodystyle=“background-color:add_color”>
…
</body>
</html>
Los códigos HTML para transparente son FFFFFF o 00FFFFFF.
Además, puedes utilizar la palabra clave "transparente" para definir una propiedad CSS que no requiere un color opaco.
rgba() y hsla() tienen un cuarto parámetro (en un rango de 0 a 1) para definir el canal alfa de un color.
No solo eso, el hexadecimal también puede tener un cuarto parámetro alfa definiendo un color de 32 bits en lugar del común color de 24 bits.
Y por último, también puedes usar la propiedad CSS 'opacity' (en un rango de 0 a 1) para indicar el nivel de transparencia de un elemento.
La etiqueta HTML para la imagen de fondo es "background-image". Es una propiedad CSS que establece la imagen de fondo para un elemento HTML.
No, solo HTML no puede quitar el fondo de una imagen. Necesitarás utilizar una herramienta de edición de imágenes o un removedor de fondo de inteligencia artificial (Erase.bg) para hacerlo.
No, solo CSS no puede quitar el fondo de una imagen. Sin embargo, puedes usar CSS para modificar la apariencia de la imagen de fondo, como ajustar su opacidad o agregar un efecto de filtro.
Por qué Erase.bg
.webp){kind=icon}
Puedes eliminar el fondo de tus imágenes de cualquier objeto, persona o animal y descargarlas en el formato que desees de forma gratuita.
.png){kind=icon}
Con Erase.bg, puedes eliminar fácilmente el fondo de tu imagen utilizando la función de arrastrar y soltar o haciendo clic en "Cargar".
.png){kind=icon}
Erase.bg puede ser utilizado en múltiples plataformas como Windows, Mac, iOS y Android.
.png){kind=icon}
Erase.bg se puede utilizar para uso personal y profesional. Utilice las herramientas para sus collages, proyectos de sitios web, fotografía de productos, etc.
.webp){kind=icon}
Erase.bg cuenta con una inteligencia artificial que procesa tu imagen de manera precisa y selecciona automáticamente los fondos a eliminar.
.webp){kind=icon}
No tendrás que gastar dinero extra ni tiempo contratando diseñadores, fondos verdes y organizando sesiones especiales para hacer tu imagen transparente.
